jQuery'单击'自动激发'live'

jQuery 'click' automatically fires 'live'

本文关键字：live 单击 jQuery      更新时间：2023-09-26

这里有一段简单的代码：

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从"关闭"更改为"展开"吗？如何解决此问题？

我试过：

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

但没有奏效。我尝试了event.stopPropagation（），但也没用。我试着用一个id为"expand"的独立div将其隐藏在document.ready上，但由于某种原因，它也不起作用。

自从我读到live（）在jQuery 1.7+中被弃用后，我一直在尝试：

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

但这也不起作用。

有什么想法吗？我想一双新的眼睛将能够发现我所缺少的东西。

谢谢。

在这种情况下，您需要两个委托事件（又名实时）处理程序。因为，您在两个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()代替live()进行委托事件处理。

这与live附加事件的方式以及事件冒泡的工作方式有关。

.live将事件处理程序附加到document。当文档注册一个事件时，它会查看该事件的target是什么。如果它与传递给.live的选择器匹配，它就会触发处理程序。

所以，当你点击#close时，就会发生以下情况：

  1. 单击#close上注册的事件，处理程序将启动
  2. #close改为#expand
  3. click事件使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

首先，更改id的运行时不是很干净。你正面临这样的结果之一。

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

例如。

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

这样就没有必要更改您的身份证。

相关文章：