在导入的页面行上运行母版页脚本

Question

I'm importing some php into a div block using a link like this

<a class="ajax-link" href="login.php">Login/Register</a>

and such script (that uses jquery load to fill the div block).

$(function() {
    $("a.ajax-link").on("click", function(e) {
        e.preventDefault();
        $("#body-element").load(this.href);
    });
});

Now let's say the loaded php file after running the php portion also contains a link with "ajax-link" class and I want that link too to change the contents of that div block

<?php 
...
?>
<a class="ajax-link" href="view.php">View content</a>

But rather than running the above mentioned function on it, it seems to ignore it completely and opens a new page instead.

So basically... how can I run that script on imported parts of the page?

Answer 1

This is where event delegation comes in handy.

$(document.body).on("click", "a.ajax-link", function(e) {
    // ... 
});