jQuery函数不适用于已由Ajax加载的数据

Question

当用户单击链接时，它将运行$.post检索一些数据并显示它。 其中一个链接会在每个会话旁边拉一个带有一个按钮的会话表。 这是其中一个按钮的代码：

<button class="view_session btn btn-info" id="3f87d50493698d06b9b48abe36cd8fc8">Details</button>

这是我的jQuery函数：

$('.view_session').click(function(){
    $('#blanket').show();
    $('#load').show();
    $.post("admin/session.php", { id: $(this).attr('id') }, function(data){
        $('#sort').html(data);
        $('#first').hide();
        $('#load').hide();
        $('#blanket').hide();
    }); 
});

但是什么也没发生。 我放入Console.log进行测试，但未触发任何操作。 我必须做些什么，因为最初在页面加载后就创建了按钮吗？

Answer 1

如果要动态添加按钮，则.click不会绑定到该按钮，除非该按钮已经存在。 在将按钮添加到DOM 之后 ，您需要绑定或使用委托，如下所示：

$(document).on('click', '.view_session', function () {

（比document更具体的选择器会很好）。

除此之外，第三个参数作为$.post函数仅在成功时出现。 您也可以使用延迟接口方法来检查失败和完成情况：

$.post(...).then(success).fail(failure).done(complete);

Answer 2

我必须做些什么，因为最初在页面加载后就创建了按钮吗？

是。

这样做的原因是将处理程序附加到jQuery对象中当前选择的元素上，因此这些元素必须在绑定发生时存在。

解决方案是您必须将事件手动重新绑定到已添加的元素上，或者使用委托绑定事件。

对于jQuery 1.7或更高版本，将on()与委托一起使用：

$("#YourclosestStaticElement").on("click", ".view_session", function () {
   //... same code as before
}

对于jQuery 1.4.3之前的版本（包括1.6），请使用delegate() ：

$("#YourclosestStaticElement").delegate(".view_session", "click", function () {
   //... same code as before
}

对于jQuery 1.3，除了手动重新绑定之外，只有live()包括1.4.3） live()才是唯一的方法：

$(".view_session").live("click", function () {
   //... same code as before
}

另外，有很多原因导致live()被取消使用，原因是它总是在触发事件之前冒泡到文档中，这意味着stopPropogation()可能成为一个问题。

全部原因列表也位于live()文档中。

引用文档 ：

• $（selector）.live（事件，数据，处理程序）; // jQuery 1.3+
• $（document）.delegate（选择器，事件，数据，处理程序）; // jQuery 1.4.3+
• $（document）.on（事件，选择器，数据，处理程序）; // jQuery 1.7+