J'ai une erreur énigmatique.jQuery sur soumettre pour un formulaire ne pas activer, lorsque jQuery charge le formulaire

Je charge un fichier html dans un div, qui contient juste un formulaire, mais mon jQuery .on ('submit') ne fonctionne pas.

Si je ne suis pas charger le code HTML dans le div et ont plutôt dans le fichier d'origine, le » .on (« submit ») fonctionne. Je ne vois pas une différence.

Utilisation de Google Chrome sur un MAC pour afficher le script

la raison pour charger le fichier, est que j'ai différentes formes, en fonction de qui utilise le script.

est-il une erreur de synchronisation ou pour l'exécution que j'ai foiré?

HTML et JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

</head> 
<body> 
<div id="divHeader"> 
    <form id="frmLookup" method="post"> 
    <table id="tblHdr"> 
    <tr> 
    <td><img id="logo" src="Logo120.jpg" /></td> 
    <td> 
     <input id="inpHdr" type="text" name="qryWords" size="23" 
      placeholder="your search word/s, number/s" onfocus="this.placeholder = ''" 
      onblur="this.placeholder = 'your search word/s, number/s'" /> 
    </td> 
    <td> 
     <button id="btnHdrFind" type="submit" value=" Find Trees " name="Find" > Find<br>Trees </button> 
    </td> 
    <td> 
     <span id="hdrName">My Site</span> 
    </td> 
    <td>  
     <button type="button" class="btnHdr" name="Help" 
       onClick="toggleHelp();" >Help<br>?</button> 
    </td> 
    </tr> 
    </table> 
    </form> 
</div> 

<div id="divResults"></div> 

<script> 
// ********************** WHEN I DO THIS IT My on submit DOES NOT WORK ???????????????? 
//$("#divHeader").load("sHeader.html", function() { 
//}); 

$("#frmLookup").on('submit', function(e) { 
    e.preventDefault(); 
    alert("Submitting"); 
    getData("data"); 
}); 

function getData(frm) { 
    alert("processing Form and Call AJAX for Results"); 
    return; 
} 
</script>

Le fichier I Charger

<form id="frmLookup" method="post"> 
<table id="tblHdr"> 
<tr> 
<td><img id="logo" src="Logo120.jpg" /></td> 

<td> 
    <input id="inpHdr" type="text" name="qryWords" size="23" 
     placeholder="your search word/s, number/s" onfocus="this.placeholder = ''" 
     onblur="this.placeholder = 'your search word/s, number/s'" /> 
</td> 
<td> 
    <button id="btnHdrFind" type="submit" value=" Find Trees " name="Find" > Find<br>Trees </button> 
</td> 
<td> 
    <span id="hdrName">Trees in the Arboretum</span> 
</td> 
<td>  
    <button type="button" class="btnHdr" name="Help" 
      onClick="toggleHelp();" >Help<br>?</button> 
</td> 
</tr> 
</table> 
</form>

Source

2016-07-25 mcl

Votre problème est que la fonction de jQuery .load() est asynchrone. Pendant que jQuery charge le fichier, il se déplace et enregistre le gestionnaire d'événements (sur html qui n'est pas encore chargé), puis il restitue le fichier, et par conséquent le gestionnaire d'événements ne se déclenche pas.

Essayez Soit

A) Mettez votre gestionnaire d'événement dans la fonction de rappel de .load() comme ceci:

$("#divHeader").load("sHeader.html", function() { 
    $("#frmLookup").on('submit', function(e) { 
     e.preventDefault(); 
     alert("Submitting"); 
     getData("data"); 
    }); 
});

B) Utilisez la délégation de l'événement comme ceci:

$("#divHeader").load("sHeader.html", function() {}); 

$(document).on('submit', "#frmLookup", function(e) { 
    e.preventDefault(); 
    alert("Submitting"); 
    getData("data"); 
});

En outre, il convient de mentionner que votre code jQuery doit être à l'intérieur d'une fonction de document prêt.

$(function() { 
    // all code goes here 
});

Source

2016-07-25 18:03:32 mhodges

Merci beaucoup. J'ai utilisé la version A et ça marche bien. Je vais ajouter du code à Doc.ready comme vous le suggérez. – mcl

@mcl Super! Je suis heureux d'avoir pu aider =) – mhodges

jQuery sur soumettre pour un formulaire ne pas activer, lorsque jQuery charge le formulaire

Le fichier I Charger

Répondre

Questions connexes