Question

使用：

var magic_div = $('<div>');
$('body').html(magic_div);
$(magic_div).append('<a href="#" class="bind-event">click</p>');
$( '.bind-event' , magic_div).bind('click' , function(){ console.log('bind works'); });

不起作用：

var magic_div = $('<div>');
$('body').html(magic_div);
$(magic_div).append('<a href="#" class="bind-event">click</p>');
$( '.bind-event' , magic_div).live('click' , function(){ console.log('bind works'); });

This probably explains it,但我不明白为什么如果DOM元素存在它不应该起作用。

Answer 1

如果您使用j('#bind-event',magic_div)更改j('#bind-event')，则在两种情况下均可正常使用。（将上下文应用于ID是没有意义的。）

Answer 2

您在锚点上绑定click事件而不会阻止它的默认行为。因此，当您单击锚点时，它会触发click事件，之后它会尝试重定向到href设置为它。

现在，bind直接将事件处理程序附加到元素上，因为live将click事件绑定到DOM的文档元素。当浏览器事件通过DOM树冒泡时，将触发任何匹配元素的click事件。由于您没有阻止锚的默认行为，因此事件不会被冒泡。试试这个它会起作用。

var magic_div = j('<div>');
j('body').html(magic_div);
j(magic_div).append('<a href="#" id="bind-event">click</p>');
j( '#bind-event' , magic_div).live('click' , function(e){ 
  e.preventDefault();
  console.log('bind works'); 
});

Answer 3

今天进行了一次对话，了解到live()不太宽容，不接受jQuery对象，但会接受DOM元素。

以下作品：

var magic_div = $('<div>');
$('body').html(magic_div);
$(magic_div).append('<a href="#" class="bind-event">click</p>');
$( '.bind-event' , magic_div.get(0) ).live('click' , function(){ console.log('bind works'); });

为什么jquery（1.6.x）上下文适用于bind（）而不是live（）？

3 个答案: