jquery - 元素点击和文档点击层次结构

Question

如果我运行以下代码，如预期的那样，我得到 1，因为 a 元素在 div 元素内。

HTML：

<div class=".holder">
  <a href="#" class=".link">a</a>
</div>

jQuery：

$(document).click(function (e) {
  alert($(e.target).closest(".holder").length);
});

现在，a 元素内部需要重新填充 div 元素，包括 a 元素本身，所以：

$(".link").on("click", function (e) {
  e.preventDefault();
  $(".holder").html("some html");
});

问题是：因为文档点击发生在 a 元素点击之后（有意义，层次结构），如果我点击 a 元素，我得到 0 而不是 1，因为 a 元素父级不再存在，并且 a 元素本身只存在于内存中。

有没有办法在不检查 a 元素点击本身的情况下解决这个问题？

Answer 1

你可以试试这个方法

$(document).click(function (e) {
    if(e.target.className === 'link'){
        e.preventDefault();
        alert($(e.target).closest(".holder").length);
        $(".holder").html("some html");
    }
});

您可以为文档创建一个单击事件并检查当前目标是什么。如果是链接，则编写代码来处理您想要的内容。

同时删除点。 在你的类名中 class="link"

检查演示

Answer 2

您可以推迟 HTML 替换：

$(document).click(function (e) {
  alert($(e.target).closest(".holder").length);
  if( $('.holder').data('executeMe') )
    $('.holder').data('executeMe')();
});

$(".link").on("click", function (e) {
  e.preventDefault();
    $('.holder').data( 'executeMe', function() {
      $(".holder").html("some html");
    });
});

​</p>