单击功能不适用于附加有 ajax 的元素

Question

 $(document).on('turbolinks:load', function() {
    $('.box').on("click", function() {
      alert('hello')
    });
  });

这不适用于带有 class 框并附加了 ajax 的元素。它仅适用于页面初始加载时出现的元素。我也尝试过作为包装器：

$(document).ready(function() { });

和

var helloscript = function() { };

但没有任何效果。

Answer 1

为动态添加的元素使用正确的事件委托：

 $(document).on('click', '.box', function() {
   alert('hello')
 });

您可以阅读有关事件委托的更多信息here。

Answer 2

你可以这样称呼它：

$(document).on('click', '.box', function (event) {

});

on click function does not work on elements appended with ajax