Les sélecteurs ne fonctionnent pas entièrement

Question

Je remplis un <div> avec la fonction html(), après avoir cliqué sur un lien. Fondamentalement, je ne veux pas que la page se rafraîchisse, mais mettez des choses à l'intérieur du <div>.

Cela fonctionne très bien. Cependant, je passe un lien dans le <div>, et essaye de le sélectionner aussi! Il me prend littéralement à une page différente, plutôt que de remplir le prochain <div>, comme je m'y attendais.

<script type="text/javascript"> 
$(document).ready(function() { 

    $(".link1").click(function(){ $("#div1").html("<a href='#' class='link2'>click here</a>"); return false; }); 
    $(".link2").click(function(){ $("#div2").html("Just Text"); return false; }); 

}); 
</script> 

<div id="div1"></div> 
<div id="div2"></div> 

Answer 1

Vous voulez probablement utiliser live():

$(function() { 
    $("a.ink1").live("click", function() { 
    $("#div1").html("<a href='#' class='link2'>Click here</a>'); 
    return false; 
    }); 
    $("a.link2").live("click", function() { 
    $("#div2").html("Just text"); 
    return false; 
    }); 
}); 

La raison en est que lorsque vous liez un événement avec un clic() il le fait sur les éléments qui existent au moment pas des éléments que vous créez plus tard. C'est pour cela que live() est pour.

Answer 2

Que diriez-vous.

<script type="text/javascript"> 
$(document).ready(function() { 

    $(".link1").click(function(){ $("#div1").html("<a href='#' class='link2'>click here</a>"); renderlink2(); return false; }); 
    renderlink2(); 

}); 

function renderlink2(){ 
    $(".link2").click(function(){ $("#div2").html("Just Text"); return false; }); 
} 
</script> 

<div id="div1"></div> 
<div id="div2"></div>