Question

我动态地将以下元素添加到DOM中。

<li id="my-link"><a href="#">Click!</a></li>

由于样式问题（Bootstrap），我需要保留<a href="#">部分，我想在点击它时将其删除。我用

更改了上面的代码

<li id="my-link"><a href="#" onclick='$(this).remove()'>Click!</a></li>

工作正常。然后，我意识到当我追加上面的元素时，我还附加了另一个div，所以我需要删除这两个元素。我做了以下

<li id="my-link"><a href="#">Click!</a></li>
$('#my-link').click(function (e) {
  $(e.target).remove();
  $('#my-div').remove();
});

但是，click事件发生时不会触发任何内容。我认为href="#"导致了这个问题，但有人可以解释为什么会发生这种情况吗？作为一种解决方法，我可以定义一个函数remove()，并通过onclick='remove()'调用它，但我想知道为什么会发生这种情况。

可能的参考：link

修改

<script>
  $(function() {
    var linkEl = '<li id="my-link"><a href="#">Click!</a></li>';
    var extraDiv = '<div id="my-div">Mydiv</div>';
    $('body').append(linkEl);
    $('body').append(extraDiv);
    $(linkEl).click(function (e) {
      console.log("this msg is not triggered when li is clicked. Why?");
      // delete both the link and extradiv
    });
  });
</script>

jsFiddle

Answer 1

问题在于 linkEl 。变量是字符串，而不是DOM元素。

当您运行$('body').append(linkEl);时，jQuery会将字符串转换为DOM元素，但您尚未更新引用。

尝试类似

的内容

var linkEl = '<a href="#">foo</a>';

// Reassign the variable to the DOM element created by jQuery.
linkEl = $('body').append(linkEl);

linkEl.click(function () {
  alert('hello');
});

Here's一个更新的例子。

单击链接元素上的侦听器

1 个答案: