Question

JQuery事件委托不处理静态内容，但完全适用于动态添加的元素。警报（'test'）完全适用于动态添加的div，但不适用于已存在的静态div。

$(document).ready(function() {
      $('.addPost').on('click', function() {
          console.log("hello");

          var dyanamicdiv =
          '  <div>'+
          '      <div class="click-delgated-event">'+
          '          hello'+
          '      </div>'+
          '  </div>';

          $('.post-container').append(dyanamicdiv);

      });
      $('.post-container').on('click', '.click-delgated-event', function() {
        alert("test");
      });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post-container">
    <div>
        <div class="click-delgated-event">
            hello
        </div>
    </div>
</div>
<button class="addPost" type="button" name="button"> ADD POST </button>

Answer 1

这是因为你在静态元素类中缺少-（在你的代码中，你有一个类似于click-delgated event的类的静态元素，而你的目标是一个带有类的元素{你的jQuery代码中的{1}}：

click-delgated-event

$(document).ready(function() {
  $('.addPost').on('click', function() {
    console.log("hello");

    var dyanamicdiv =
      '  <div>' +
      '      <div class="click-delgated-event">' +
      '          hello' +
      '      </div>' +
      '  </div>';

    $('.post-container').append(dyanamicdiv);

  });
  $('.post-container').on('click', '.click-delgated-event', function() {
    alert("test");
  });
});

Answer 2

将-添加到您的div类名称

如下所示：

<div class="click-delgated-event">
   hello
</div>

您的班级名称中错误-

所以它的工作正常

Answer 3

在<div class="click-delgated event">您错过了-它应该是

<div class="post-container">
    <div>
        <div class="click-delgated-event">
            hello
        </div>
    </div>
</div>

静态内容上的jquery事件委派不起作用

3 个答案: