jQuery的'click'自动触发'live'事件

Question

这里是一段简单的代码：

HTML：

<div id="close">Click me</div>

JS代码：

$("#close").click(function(){
    alert("1");
    $(this).attr('id','expand');
});



$("#expand").live('click', function(){
    alert("2");
    $(this).attr('id','close');            
});

问题：当我点击“关闭”按钮时，它会自动调用live（）。 在jsfiddle中查看：http://jsfiddle.net/uFJkg/ 这是因为我将同一元素的ID从“close”更改为“expand”吗？ 我该如何解决这个问题？

我尝试过：

 $("#expand").die().live('click', function()

但是它没有起作用。我尝试了 event.stopPropagation()，但那也没有帮助。我尝试使用一个具有ID“expand”的单独的div，在文档准备好时将其隐藏，但由于某种原因它也没有起作用。

后来我尝试了live() 已在jQuery 1.7+中被弃用：

$("#expand").on('click', function(){

这个也没有起作用。有什么想法吗？我认为新的视角可以发现我所忽略的问题。

谢谢。

- Blueboye

---

如果您从第一个点击函数中返回true;会发生什么？ - Platinum Azure

你正在为同一个事件添加两个处理程序，是吗？ - Brad

是的，但我正在更改div的id。那不会被视为不同的事件吗？@Platinum：我正在使用on()而不是live()，现在甚至没有被调用。 - Blueboye

Answer 1

在这种情况下，你需要使用事件委托(也称为live)处理程序。因为，你正在在两个id之间切换并且这种切换使两个id对DOM动态。

$("body").on("click", "#close", function(){
    alert("1");
    $(this).attr('id','expand');
});

$("body").on("click", "#expand", function(){
    alert("2");
    $(this).attr('id','close');            
});

演示

注意

由于 live() 已被弃用，因此请改用 .on() 进行委托事件处理。

- thecodeparadox

---

完美地工作了。非常感谢 :)!!! 我想我尝试了live()来处理这两个事件，但我没有尝试on()。非常感谢。 :) - Blueboye

Answer 2

这与live附加事件和事件冒泡的工作方式有关。 .live将事件处理程序附加到document。当文档注册事件时，它会查看该事件的target是什么。如果匹配传递给.live的选择器，则触发处理程序。

因此，当您单击#close时，会发生以下情况：

1. 在#close上注册点击事件，处理程序触发。
2. #close更改为#expand
3. 点击事件冒泡到DOM，直到达到document
4. 在document上注册点击事件，文档看到目标元素的ID为#expand，然后触发事件处理程序

解决方法是在处理程序中添加stopPropagation()。

$("#close").click(function(e){
  if(!e) { e = window.event; }
  e.stopPropagation();

  alert("1");
  $(this).attr('id','expand');
});

然而，我建议不要使用live，而是考虑使用delegate或者on来处理委托事件。

我也建议不要更改ID。如果你想保留收起/展开的想法，可以尝试以下方法：

<div id="toggler" class="close">Close</div>

$('#toggler').on('click',function() {
    $(this).toggleClass('close').toggleClass('expand');
});

一个事件处理程序，没有委托，因为它钩入了永久ID

- jackwanders

Answer 3

首先，运行时更改ID并不是很规范。你正在面临其中一个结果。

你可以考虑使用data属性。jQuery可以通过访问数据属性来读取它们。

例如：

$("#myObject").data("expanded", true);

这样就不需要改变你的ID。

- Chris Beemster