新按钮的 Javascript 事件不起作用

Question

我有一个 Rails 应用程序，其中包含作业列表。根据作业的状态，该作业将会有某些按钮。为了让我的应用程序感觉更像是一个 native 应用程序，当其中一个作业的状态发生变化时，我使用 JavaScript 添加一个新的 html 按钮，而无需刷新页面。新添加的 html 按钮有一个类，其中绑定(bind)了一个 javascript 事件。但是每当我单击该按钮时，应该触发的事件就永远不会消失。以下是一些示例:

刷新页面时创建的正常工作按钮

<div id="user_completed<%= i %>">
          <% if !is_runner?(@user) && job.status == 'assigned' %>
            <div class="row job-buttons" id="user_completed_button_row<%= i %>">
              <div class="small-6 columns">
                <div class="button small success radius user_completed_button" data-job-id="<%= i %>">job completed</div>
              </div>
            </div>
          <% end %>
        </div>

用javascript添加的按钮

        var user_completed = '<div class="row job-buttons" id="user_completed_button_row' + id + '">' +
                                '<div class="small-6 columns">' +
                                    '<div class="button small success radius user_completed_button" data-job-id="' + id + '">job completed</div>' +
                                '</div>' +
                              '</div>';
        var user_completed_div = "#user_completed" + id;
        $(user_completed_div).html(user_completed);

这两个按钮应该是等效的。第一个按钮是在刷新页面后作业处于“已完成”状态时创建的，第二个按钮是在作业处于“已完成”状态并且页面未刷新时创建的。这两个按钮应该具有完全相同的 HTML。

现在，当单击第一个按钮时，javascript 事件会顺利触发，但是当单击第二个按钮时，javascript 事件根本不会触发。我不断检查 chrome 开发者工具，它们似乎具有完全相同的 HTML。

这是我试图触发的事件。

  $('.user_completed_button').click(function(e) {
    var id = $(this).data('job-id');
    var url = "/jobs/" + id;
    $.ajax({
      type: "PUT",
      url: url,
      data: {job: {status: "completed"}},
      async: false, 
    });
  });

旁注:我正在使用 javascript 插件推送器以及 Turbolinks。我不知道这是否有什么区别，只是想提一下。

Answer 1

似乎您可能在元素出现在页面上之前绑定(bind)单击处理程序，并且 jQuery 将仅在绑定(bind)发生时绑定(bind)到列表中的元素。

为了确保您可以获得动态创建的元素，请将监听器添加到父对象并按照建议使用 on (如果您有较旧的 jQuery，则使用 delegate)

$('#user_completed_holder_or_whatnot').on('click', '.user_completed_button', function(e) {
    var id = $(this).data('job-id');
    var url = "/jobs/" + id;
    $.ajax({
        type: "PUT",
        url: url,
        data: {job: {status: "completed"}},
        async: false, 
    });
});

这表示，对于持有者('#user_completed_holder_or_whatnot')的任何单击，如果单击的目标与为第二个参数传递的选择器('.user_completed_button')匹配，则运行句柄方法。

编辑:您还可以在动态创建元素后重新绑定(bind)，但这会增加潜在的性能开销或可能使您的代码变得困惑。