Question

我的问题是，在将它们插入dom之前，我必须在某些DOM元素上创建事件侦听器。

现在一般来说这很容易：

var button = $('<button>Click Me</button>');

button.on('click', function(){ alert('clicked'); });

$('body').append(button);

然而，问题是我需要将按钮包装在其他html中，如下例所示：

http://jsfiddle.net/a8xjJ/

如果我将按钮对象与html字符串混合，则事件侦听器会中断。这就是事件监听器在逻辑上与对象失去联系的时候。

我的问题是我需要使用html字符串，这是项目的约束。也许有一种方法可以在字符串上使用dom选择器？或者也许你可以想到另一种方法来制作上述小提琴。

Answer 1

您可以使用JQuery的.delegate()函数绑定动态元素。

我已将您的小提琴更新为this。

var button = $('<button>Click Me</button>');
var html = '<form>' + button.clone().wrap('<div/>').parent().html() + '</form>';
$('div').append(html);

$(document).delegate(button,'click', function(e){ 
    e.preventDefault(); 
    alert('Clicked');
});

您也可以使用.on()绑定动态元素上的事件。

$(document).on('click', button, function(e){ 
    e.preventDefault(); 
    alert('Clicked');
});

请注意，此方法将event作为其第一个参数。

Answer 2

如果你开始使用对象，尽量不要使用它们的字符串表示（它只输出 shell ，但不输出事件和其他数据）。你问题的一个可能的解决方案是：

$("<button>Click Me</button>").on("click", function(e) {
    e.preventDefault();
    alert("Clicked");
}).wrap("<form><div></div></form>").closest("form").appendTo("div");

DEMO： http://jsfiddle.net/a8xjJ/2/

在DOM插入之前绑定jQuery事件

2 个答案: