de l'événement.preventDefault ne fonctionne pas

J'ai ce code simple ici, rien de trop avancé.

    $("input#send").submit(function(event){
      event.preventDefault();
    $.ajax({
        type: 'POST',
        url: add.php,
        data: data,
        success: success,
        dataType: dataType
    });
});

Qu'je clique sur le bouton "envoyer", le event.preventDefault ne fonctionne pas, et le chargement de la page.

Des idées pourquoi?

OriginalL'auteur Peter Stuart | 2011-12-16

10

Un forme a l'événement submit, pas un bouton de. De Plus, un ID doit être unique afin tag#id peut-être juste #id.
```
$("#theform").submit(function(event) {
    event.preventDefault();
    //...
});
```
Merci, cela a fonctionné. Puis-je vous demander, j'ai utilisé la fonction de clic sur le bouton plus tôt, mais il ne semble pas pour travailler de cette façon? Pourquoi est-ce?
Stuart: Que voulez-vous dire exactement? Mettre click sur le submit bouton marche aussi: jsfiddle.net/rKJJU.
Je pense que c'est parce que vous ne mettez pas de guillemets autour de add.php, voir ma réponse ci-dessous. Je suis d'accord avec @pimvdb de conseils à propos de mettre le gestionnaire d'événement sur le formulaire lui-même, parce que vous pouvez également appeler à la soumission d'un formulaire avec la enter touche à l'aide du clavier.

OriginalL'auteur pimvdb
7

Vous avez besoin de se lier à la forme du submit de l'événement ou du bouton click événement et appelez event.preventDefault() si vous voulez arrêter de la forme de la présentation:
```
$('form').bind('submit', function (event) {
    event.preventDefault();
});

$('form').find(':submit').bind('click', function (event) {
    event.preventDefault();
});
```
OriginalL'auteur Jasper
2

Je crois que l'événement submit est pour le forme élément. Pour un input[type='bouton'] vous pouvez utiliser l'événement click.

OriginalL'auteur epignosisx
1
1. Ajouter des guillemets autour de 'add.php'
2. De changer le sélecteur dans la première ligne à la id attribut de la forme, qui contient input#send.
L'avantage de la manipulation de la submit() gestionnaire sur la forme plutôt que le click gestionnaire sur l'entrée, c'est que certains formulaires peuvent être envoyés en appuyant sur la touche entrée (lorsque l'utilisateur se concentre sur l'un des champs de formulaire). Si vous n'avez pas de id attribut, ajouter un ou utiliser un autre sélecteur jQuery pour cible la balise form.
```
$("#myform").submit(function(e) {
    e.preventDefault();
    $.ajax({
        type: 'POST',
        url: 'add.php',
        data: data,
        success: success,
        dataType: dataType
    });
    return false;
});
```
OriginalL'auteur jessegavin
0

Essayez d'utiliser return false au lieu
```
$("input#send").submit(function(event) {
    $.ajax({
        type: 'POST',
        url: add.php,
        data: data,
        success: success,
        dataType: dataType
    });
    return false;
});
```
Ne devrait pas faire une différence.
return false jQuery gestionnaire d'événements est le même que l'appel à la event.preventDefault(); event.stopPropagation();
Je l'avais essayé, ça ne marchait pas à cause de l'ajax. il a travaillé si je l'ai mis au-dessus de l'ajax code, mais pas après. Merci quand même 🙂
c'est exactement mon problème! merci beaucoup 🙂

OriginalL'auteur Josh Toth
0

Si vous utilisez preventDefault je suppose que cela signifie que vous ne voulez PAS que le défaut de soumettre à l'action. Je voudrais juste utiliser un autre événement à la place de l'aide .soumettre. Pour moi, ce n'est pas la soumettre l'action que vous voulez intercepter, mais plutôt le clic, qui serait normalement entraîner la soumettre.
```
$('#inputSend').on('click', function(event) {
  event.preventDefault();
  //the rest
});
```
OriginalL'auteur Greg Pettit

Si les deux return false et event.stopPropagation() ne fonctionne pas, essayez la méthode suivante. À l'aide de .on() fera de la fonction envoyer accessibles. Une fois que vous modifiez le .submit() à .on("submit"..), vous pouvez soit utiliser return false ou e.stopPropagation().

$(document).on("submit", "input#send", function(event) {
    event.stopPropagation();
    $.ajax({
        type: 'POST',
        url: add.php,
        data: data,
        success: success,
        dataType: dataType
    });
    return false; });

OriginalL'auteur wag0325

Vous devez vous connecter pour publier un commentaire.