通过Ajax加载的内容打破了按钮

Question

我有一个通过ajax加载的html页面，新加载的html内容有以下html。当我首先加载html然后初始化javascript时，它通常很有用。

<a href="" class="ajax-button" data-url="/account/change-password">Change password</a>

我的js：

$('.ajax-button').on('click', OnLoadContent);

function OnLoadContent(e) {
    e.preventDefault();
    var pageurl = $(this).data('url');
    $.ajax({
        type: "GET",
        url: pageurl,
        success: function(data) {
            alert(data);
            $("#content-container").html(data);
            window.history.pushState({path:pageurl}, '', pageurl);
        },
        error: function(response) {
           alert("ERROR:" + response.responseText);
        }
    });
}

然而，由于它正在加载新的html内容，我认为问题是当通过ajax加载html内容时javascript已经存在，因此点击功能不起作用，除非我再次点击。我想知道如何解决这个问题？

Answer 1

Delegate 点击更高的dom ...

$('body').on('click', '.ajax-button', OnLoadContent);