Question

var html = '<div><a href="#" id="test">Btn</a></div>';
$(html).find("#test").click(function(){
  console.log("clicked");
});
//later
$(htmlNode).html(html);

为什么我没有收到“点击”日志？

Answer 1

您需要附加jQuery对象，而不仅仅是设置内部HTML：

var html = $('<div><a href="#" id="test">Btn</a></div>');
html.find("#test").click(function(){
  console.log("clicked");
});
//later
$(htmlNode).append(html);

编辑：使用append代替html更加清晰，即使html在传入时似乎在功能上等同于.empty().append(val)一个jQuery对象。

Answer 2

问题是你将click事件绑定到DOM中尚未存在且不是jQuery对象的事件。你可以采取两种方法。

1）使用直播：

$("#test").live('click', function(){
  console.log("clicked");
});
//later
var html = '<div><a href="#" id="test">Btn</a></div>';
$(htmlNode).html(html);

2）构造一个合适的jQuery DOM对象，并绑定到该对象。

var a = $('<a></a>').attr('href', '#').click(function() {
  console.log("clicked");
});
//later
$(htmlNode).html(a.wrap('<div></div>').html()); //This could also use append or appendTo.

最好的方法取决于您的情况。一定要考虑在JavaScript中附加到DOM是非常昂贵的！

Answer 3

你只是将点击事件附加到html ..你实际上没有点击点击事件

在您附加活动后尝试拨打.click()。

Answer 4

应该是：

$(htmlNode).html(html).filter("#test").click(function(){
  console.log("clicked");
});

或者你可以这样做：

$("#test").live('click',function(){
    console.log("clicked");
});

稍后创建你的HTML

Answer 5

如上所述，您尝试将click事件添加到尚不存在的dom元素中。

$ .live是一个不错的选择，但遗憾的是在大型应用程序中维护并且速度很慢。

您可以将事件绑定包装在超时中，该事件绑定将事件绑定推送到队列的末尾 - 这意味着事件绑定将在您将新元素推送到dom之后执行。像这样：

var html = '<div><a href="#" id="test">Btn</a></div>';
setTimeout(function(){$("#test").click(function(){
  console.log("clicked");
});},0);
//later
$(htmlNode).html(html);

jquery单击而不附加到DOM

5 个答案: