Question

假设我有一个名为example.html的文件，如下所示：

<button>Click me</button>

现在假设我有另一个名为index.html的文件，其中包含以下内容：

$.get('example.html',function(data){
  $('body').html(data);
});

我该怎么做......：

$('button').click(function(){
  $(this).hide();
});

...来自我的example.html文件？

Answer 1

试试这个：

$.get('example.html',function(data){
  // load
  $('body').html(data);

  // use
  $('button').click(function(){
    $(this).hide();
  });
});

Answer 2

您需要将事件委托给静态父级：

改变这个：

$('button').click(function(){

到此：

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

因为您的内容是通过ajax调用加载的，所以最初它在dom中无法加载，因此在这种情况下，您的直接事件绑定将无效。

要完成这项工作，必须将事件委托给静态父级，在您的情况下，您可以委托给body或document本身以使其正常工作。

Answer 3

我认为问题是注册到按钮元素的点击处理程序没有被触发....

解决方案是event delegation

$(document).on('click', 'button', function(){
  $(this).hide();
});

当您使用普通事件注册模型时，它会将处理程序直接注册到目标，这些处理程序在处理程序注册执行时存在于dom中。因此，动态添加的元素将不会获得这些处理程序。

对此的解决方案是使用事件委托，在此模型中，处理程序注册到祖先元素，当页面加载了选择器以过滤掉源元素时，该元素将出现。这利用了事件传播 - 元素中发生的事件传播到所有祖先元素（像焦点事件这样的例外）。因此，元素中发生的事件会传播到其中一个元素中的祖先元素，然后处理器被注册，然后事件源元素（event.target）及其祖先与作为第二个参数传递的选择器匹配，如果满足则处理程序已执行。

如何与使用ajax插入的对象进行交互？

3 个答案: