Question

I’m posting and get data back to set to a text_div:

<div id="text_div">
    {{file.text|safe}}
</div>

$.ajax({
    ...
    success: function(data){
        $("#text_div").html(data);
    }
});

the text_div has paragraphs like below:

<p>xxx <a title="FOO" class="bar" href="#">foo</a> xxx xxx. </p>

the back data can be to html, but links action can not be called.

$("a.bar").click(function(){
    alert('xxx');
});

the weired thing is if i set a stack paragraph with the link pattern, class action can be called. i check element by chrome tool, the static paragraph is same with data got from POST request.

Answer 1

$("a.bar").click(function(){
    alert('xxx');
});

Won’t work because you’re inserting it dynamically. You’ll need to bind the click event using the .on() function like:

$("#text_div").on('click', 'a.bar', function(){
    alert('xxx');
});