jquery - 将操作绑定(bind)到某些 html 然后附加

Question

假设我们有一段带有附加操作的 html。

var html = $('<a href="#">click me</a>');
html.find('a').bind('click', function(e) {
   alert('You clicked me!');
});

现在我们想要将这段 html(带有绑定(bind)操作)附加到一些 <div id="destination"></div> .

$('#destination').append(html);

这可能吗？ (参见jsfidder)

我需要此功能来绑定(bind)模式窗口内容的一些操作，然后将此内容附加到模式窗口的 html 包装器，然后调用 Modal.show() 。所以

这是好的做法还是不建议这样做？

Answer 1

这个概念应该可以正常工作。您的 fiddle 的问题是使用 find ，它查看后代元素，但您的 a 元素不是后代。使用filter相反:

var html = $('<a href="#">click me</a>');
html.filter('a').bind('click', function(e) {
    alert('You clicked me!');
});

这是一个updated fiddle .

或者，您可以使用 on (如果您使用的是 jQuery 1.7+)或 delegate 将事件处理程序附加到 #destination:

$("#destination").on("click", "a", function() {
    alert('You clicked me!');
});

如果这样做，您可能需要为 a 元素提供一些标识符，否则事件处理程序将为 #destination< 的任何 a 后代执行.

编辑(根据评论)

正如 @RoryMcCrossan 在评论中指出的，在这种情况下，您实际上可以完全删除 filter 。这是因为 jQuery 对象中只有一个元素。但是，如果您为了解决问题而缩短了代码，请小心，因为在这种情况下删除 filter 会将事件处理程序绑定(bind)到所有元素:

var html = $('<a href="#">click me</a>');
html.bind('click', function(e) {
    alert('You clicked me!'); //Bound to all elements in `html`
});