Question

让我们假设我们有一些带有附加动作的html。

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

现在我们想要将这段html（带有绑定操作）附加到某些<div id="destination"></div>。

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

有可能吗？（见jsfidder）

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

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

Answer 1

这个概念应该可以正常运作。你的小提琴的问题是使用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元素一些标识符，否则事件处理程序将为a的任何#destination后代执行。

修改（根据评论）

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

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

Answer 2

据我所知$('<a href="#">click me</a>');应该返回创建的元素。

您应该删除find('a')来电，如下例所示：

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

Answer 3

您是否查看了.find()的文档。

获取当前匹配组中每个元素的后代元素，由选择器，jQuery对象或元素过滤。

你的html元素数组没有后代。你可以使用filter（）在DOM中查找，但在这里你可以直接使用each()：

var html = $('<a href="#">click me</a>');
html.each(function(index){

    $(this).bind('click', function(e) {
   alert('You clicked me!');
});
});
$('#destination').append(html); //click not works :(

检查更新的jsFiddle。

Answer 4

在追加后绑定事件（html成为实际的DOM对象）。

var html = $('<a href="#">click me</a>');

$('#destination').append(html).find('a').click(function(e) {
   alert('You clicked me!');
});

或绑定html

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

将动作绑定到某些html然后追加

4 个答案: