Pourquoi mon événement jQuery n'est-il pas déclenché lorsque le bouton est cliqué?

Question

J'essaie d'appeler la méthode .ajax() lorsqu'un bouton avec id = go est cliqué. Ce bouton est affiché lorsqu'un autre événement jQuery est déclenché, à savoir qu'un bouton avec une classe appelée prédicat est cliqué.

Le bouton avec id = go est affiché sans aucun problème mais en cliquant dessus, il n'y a pas d'appel à la méthode alert() ou getResults() qui sont censés se produire. Cependant, si je code dur le bouton avec id = aller dans la page et ne l'ai pas généré par jQuery alors la chose fonctionne bien.

Le code HTML généré ressemble à ceci:

<div id="resultCount"><input name="val0" value="3" type="hidden"> 
val0=3&amp;<br><input name="go" id="go" value="go" type="button"></div> 

Pourquoi le code généré la cause d'un problème, quand si je coder en dur le bouton sur la page, il ne cause pas de problème. Le $ («objet «) .... peut être ignoré, pour le moment, je ne fais que $ DECLENCHEMENT (». Prédicat ») ....

$(document).ready(function() { 
    $(".predicate").click(function() { 
     makeQuery(this.id); 
     //alert(this.id); 
     }); 
    $(".object").click(function() { 
     //alert(this.id); 
     }); 
    var variables = 0; 
    var queryString = ""; 
    var noOfResults; 
    var formValues=""; 
    var goBegin = ""; 
    var goEnd = "<br/><input name='go' id='go' type='button' value='go'/>"; 
    function makeQuery(value) { 
     queryString = queryString + "val" + variables + "=" + value + "&"; 
     formValues=formValues+"<input type='hidden' name='val"+variables+"' value='"+value+"' />"; 
     variables = variables + 1; 
     $("#resultCount").html(goBegin+formValues+queryString+goEnd);   
    } 
    function getResults(){ 
     $.ajax({ 
      type : "GET", 
      url : "ObjectCount", 
      data : queryString + "count=" + variables, 
      success : function(results) { 
       noOfResults = results; 
       $("#resultCount").html(results - 1 + " results"); 
      } 
     }); 
    } 
    $("#go").click(function() { 
     alert("We have been alerted"); 
     getResults(); 
     }); 
}); 

Answer 1

Le problème est que vous attribuez l'événement clic avant d'insérer l'élément avec id = go dans les DOM ...

si l'événement ne peut être attribué ..

utilisez live ou attribuez l'événement immédiatement après la création de l'élément. Après le $("#resultCount").html(goBegin+formValues+queryString+goEnd); .. mais à l'intérieur de la même fonction makeQuery ..

Answer 2

Pas une réponse, exactement, mais essayez ceci:

alert("Wiring up go button"); 
$("#go").click(function() { 
    alert("We have been alerted"); 
    getResults(); 
    }); 
alert("go button wired!"); 

J'ai souvent constaté qu'un bug au milieu de mon code document.ready, qui ne déclenche pas toujours une erreur, quittera la moitié de mon Unwired stuff.

Answer 3

Lorsque vous générez dynamiquement le bouton, vous devez lier l'événement à l'aide de live(). Maintenant, lorsque vous liez l'événement du bouton, le bouton n'existe pas encore et ne fonctionnera donc pas si nécessaire. La méthode .live() s'assurera que le gestionnaire donné fonctionnera sur tous les éléments avec le sélecteur donné, maintenant ou dans le futur.

Vous avez donc besoin d'utiliser quelque chose comme ceci:

$('#go').live('click', function() { 
    getResults(); 
}); 

qui peut également être simplifié à ceci:

$('#go').live('click', getResults);