jquery - jQuery replaceWith 和切换冲突

Question

我有html

<div id=1>
  <span id=2></span>
</div>
<div id=3>
</div>

我正在尝试替换span并a使用锚点.toggle() <div id=3>

$('#2').replaceWith(function(){
  return $("<a id=\"2\" href=\"#\" />").append($(this).contents());
});

这适用于将跨度转换为锚点，但是当我尝试链接点击功能.toggle()时，它拒绝切换。

$('#2').replaceWith(function() {
  return $("<a id=\"2\" href=\"#\" />").append($(this).contents());
}).click(function() {
  $('#3').toggle();
  return false;
});

.toggle()如果我删除，点击功能有效.replaceWith()。

Answer 1

我的最终解决方案

$('#2').replaceWith(function(){
  return $('<a id="' + $(this).attr('id') + '" href="#" />').append($(this).contents());
});

$('#2').click(function() {
  $('#3').toggle();
  scrollToDiv($(this),0);
  return false;
});

Answer 2

您正在绑定到刚刚删除的元素。

$('#2') // <-- here you already selected the span
// now you replaced it with a new element
.replaceWith(function() {
  return $("<a id=\"2\" href=\"#\" />").append($(this).contents());
})
// the selector is still on the span so you bound the click event to the span
.click(function() {
  $('#3').toggle();
  return false;
});

您可以做的是使用委托，因此您对元素所做的更改并不重要。将其绑定到父元素

$('#1').on('click','#2',function(){
      //your code here
});

现在你的父元素将监听冒泡的点击事件并处理它们。所以你改变#2元素多少次都没关系 - 只要它是 id=2 那么它就会触发处理程序