如何在动态加载内容中的链接上绑定“点击”？

Question

I have some weird problem. Let's assume we have an HTML page with the following code:

<div class="description">
        <a href='#' class='oldkeenload btn btn-apply' data-subject='1' data-subject2='3'><i class="fa fa-cloud-download" aria-hidden="true"></i> Загрузить материал</a>
</div>

When user clicks the href button with the class oldkeenload I do the following js code:

$(".oldkeenload").click(function () {
    // console.log("Clicked");
    var topic=$(this).data('subject');
    var kcode=$(this).data('subject2');

    var datastring = '/app/server.php?oldkeen=' + kcode + '&topicid=' + topic;

    // console.log(datastring);

    // var parentTag = $( this ).parent().get( 0 ).tagName;
    // console.log("Parent tag: " + parentTag);

    $(this).parent(".description").load(datastring);

    return false;
});

It just loads the response from the server to the "description" div. I do this to avoid loading all the materials, letting user load what he needs in one specific category. User sees intro to the material, presses the load button, the contents load.

However, when you load with this method the new links in the loaded content fails to load new contents. When I click the link nothing happens.

Any idea how to do it in JS without server side scripting?

Answer 1

The jQuery .load() function accept an extra callback. It will be run after the load is done. You can bind the click function again after the DOM is updated by .load .

var loadData = function () {
    // console.log("Clicked");
    var topic=$(this).data('subject');
    var kcode=$(this).data('subject2');

    var datastring = '/app/server.php?oldkeen=' + kcode + '&topicid=' + topic;

    // console.log(datastring);

    // var parentTag = $( this ).parent().get( 0 ).tagName;
    // console.log("Parent tag: " + parentTag);
    var $container = $(this).parent(".description");
    $container.load(datastring, function () {
        $(".oldkeenload", $container).click(loadData);
    });

    return false;
}
$(".oldkeenload").click(loadData);