problèmes ayant jQuery élément sélection d'un div chargé

Question

donc j'ai un conteneur div, en son sein, en utilisant .load je charge une partie du contenu de db, après la .load le résultat sera quelque chose comme

<div id="results"> 
    <div id="a1" class="search-result"></div> 
    <div id="a2" class="search-result"></div> 
</div> 

Comme Je comprends, je devrais être en mesure de sélectionner les div imbriqués en utilisant $ ("# results .search-result"), mais je ne peux tout simplement pas le faire fonctionner. Si j'essaie:

$("#results .search-result").click(function() { 
alert('click'); 
} 

cela ne semble tout simplement pas fonctionner. Il ne fonctionne que si je l'utilise:

$("#results").click(function() { 
alert('click'); 
} 

la seule chose que je peux penser est que parce que les div imbriquées sont chargés de l'aide .load alors il pourrait ne pas être en mesure de les voir?

toute aide?

Answer 1

Les gestionnaires d'événements sont attachés aux éléments DOM dans votre exemple et sont effacés lorsque le div est chargé car les éléments sont remplacés. Essayez ceci:

$("#results .search-result").live('click', function() { 
alert('click'); 
}); 

.live() est un gestionnaire qui se redresse au niveau du document au lieu de capturer les clics que la bulle ... et s'effacer avec le .load()

Answer 2

Si les résultats de la recherche est ajouté après le fait que vous devez utiliser live() à la place.

$("#results .search-result").live("click", function() { 
    alert('click'); 
}); 

Plus votre code avait une erreur de syntaxe (notez la dernière ligne). C'est une bonne pratique de regarder vos erreurs console pour voir ces types d'erreurs JS.

Enfin, je suppose que votre extrait est une simplification parce que ce que vous avez est (selon votre CSS) la hauteur zéro de sorte que vous pourriez ne pas être capable de cliquer dessus.

Answer 3

$().click() ajoute simplement le gestionnaire de clics correspondant à l'élément qui existe au moment où la fonction click() est appelée. Si vous souhaitez que le gestionnaire d'événements soit ajouté aux éléments ajoutés ultérieurement, utilisez la fonction live()