jQuery - 似乎无法 .live() 绑定到标签元素。为什么？

Question

这是我的代码：

HTML：

<ul id="more-items">
   <li><label class="button">hi</label></li>
   <li><label class="button">hi</label></li>
   <li><label class="button">hi</label></li>
</ul>

Javascript：

$('ul#more-items label.button').live('click', function()
{
   alert(1);
});

单击标签不会导致alert() 触发。 .live() 绑定似乎对标签元素没有影响...

如果我将其更改为使用 .click() 甚至 .bind()，它会完美地工作。 .live() 不起作用有什么原因吗？有办法解决这个问题吗？

我使用 .live() 的原因是因为 ul#more-items 将被多次读取到页面，我不想每次发生这种情况时都必须触发一个函数重新绑定点击。

Answer 1

jQuery 的 live() 方法依赖于事件冒泡（一直到根节点）来工作。

如果有任何代码会停止 label 或其任何祖先上的事件冒泡，则 live() 将不起作用。

label 或其祖先之一是否有可能具有具有以下任一功能的处理程序？

return false;

或者

event.stopPropagation();

如果是这样，live() 将失败。

---

相关 jQuery 文档：

• .live() - http:// /api.jquery.com/live/
• .stopPropagation() - http://api.jquery.com/event.stopPropagation/

Answer 2

元素 id 必须是唯一的。你的陈述“我使用 .live() 的原因是因为 ul#more-items 将被多次读取到页面..”告诉我你将有多个这样的内容：

<ul id="more-items"> 
  <!--Stuff-->
</ul>
<ul id="more-items"> 
  <!--Stuff-->
</ul>

这将是无效的 HTML，因为 ID 更多- 项目存在两次。

Answer 3

尝试

$('label.button').live('click', function()
{
   alert(1);
});

或

$('ul#more-items').delegate('label.button','click', function()
{
   alert(1);
});

Answer 4

看起来没问题，但你的警报应该是alert("1");

或者：

var 1=“1”；

警报（1）；

Answer 5

你可以试试这个。它可能会起作用

更改：

$('ul#more-items label.button').live('click', function() 
{ 
   alert(1); 
}); 

到此：

$('ul#more-items label.button').unbind('click').live('click', function() 
{ 
   alert(1); 
}); 

Answer 6

你的代码对我有用。你使用什么版本的jquery？您是否在 $(document).ready 函数中定义了 javascript？