2

我的问题是在将某些 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 选择器？或者，也许您可​​以想出另一种方法来使上述小提琴工作。

4

2 回答 2

4

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

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

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 作为其第一个参数。

于 2012-09-27T09:35:50.837 回答
2

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

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

演示：http: //jsfiddle.net/a8xjJ/2/

于 2012-09-27T09:33:32.607 回答