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);
});

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

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

问题是：因为文档单击发生在元素单击（有意义，层次结构）之后，如果我单击a元素，我得到0而不是1，因为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”

CHECK DEMO

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");
    });
});

元素单击和文档单击层次结构

2 个答案: