Ne peut pas accrocher forme soumettre un événement

Question

J'essaie d'utiliser jQuery pour soumettre un formulaire pour que la page n'a pas besoin d'être rechargées je ne peux pas obtenir à crochet sur la forme que.

<form action="index.php" method="get" id="frmFilter"> 

et

$("#frmFilter").submit(function() { 
    alert('t'); 
    return false; 
}); 

Il ne fonctionnera pas bien; lorsque j'utilise le bouton de soumission sur le formulaire qu'il soumet au lieu de montrer une alerte.

Le formulaire est réellement chargé en utilisant l'événement .load de jQuery et j'ai essayé de mettre le code ci-dessus sur la page avec le formulaire ainsi que la page qui charge le formulaire et les deux ne fonctionneraient pas.

Une idée de ce que je fais mal?

Testé utilisant à la fois et IE8 3.

Answer 1

Vous avez mentionné que vous transférons le formulaire sur votre page avec la méthode de jquery load. Cela signifie que tout type de gestionnaire d'événements submit déclenché dans la "page parente" document.ready aura déjà été déclenché au moment où votre load terminera son travail. Ce que vous devez faire est de trouver un moyen d'attacher cet événement après la charge est terminée ... Il y a deux façons que je peux suggérer:

Un, dans votre "page parente", joindre l'événement après la charge a terminé, dans un rappel. Par exemple:

$('#sometarget').load('someform.php', function() { 
    // this is the load "complete" callback. attach events in here. 
    $("#frmFilter").submit(function() { 
     alert('t'); 
     return false; 
    }); 
}); 

Une autre idée est de mettre ce script dans le « someform.php » (! Ou tout ce que vous appelez), mais dans le cadre du document, et non pas dans sa tête ou propre « document .prêt". (Rappelez-vous, il y a longtemps document.ready tiré, si quoi que ce soit dans cette « someform page » propre « document.ready » ne verra jamais la lumière du jour étant injecté par load ...)

PARENT PAGE

$('#sometarget').load('someform.php'); 

FORMULAIRE PAGE

<form action="index.php" method="get" id="frmFilter"> 
    <input type="..." /> 
    <input type="..." /> 
</form> 
<script type="text/javascript"> 
$("#frmFilter").submit(function() { 
    alert('t'); 
    return false; 
}); 
</script> 

Bonne chance!

Answer 2

Dans votre rappel:

$("#frmFilter").submit(function (e) { 
    e.preventDefault(); 
    alert('t'); 
    return false; 
});