新按钮的Javascript事件不工作

Javascript event for new button not working

本文关键字：Javascript 事件 工作 按钮 新按钮      更新时间：2023-09-26

我有一个rails应用程序，它包含一个jobs列表。根据job的状态，该作业将有某些按钮。为了让我的应用程序感觉更像一个本地应用程序，当其中一个作业的状态发生变化时，我使用javascript添加一个新的html按钮，而不刷新页面。这个新添加的html按钮有一个类，它绑定了一个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插件推进器以及涡轮链接。我不知道这是否有什么不同，只是想我提到了它。

似乎是在元素出现在页面上之前绑定了点击处理程序，而jQuery在绑定时只会绑定到列表中的元素。

为了确保您可以获得动态创建的元素，请将侦听器添加到父对象中，并按照建议使用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"）匹配，则运行handle方法。

编辑：您也可以在动态创建元素后重新绑定，但这会增加潜在的性能开销，或者会使代码变得混乱。

要处理动态创建的DOM对象的事件，应该使用jQuery on方法。像这样的 
 $('.user_completed_button').on('click', function(event) { ... })

此处提供更多文档：http://api.jquery.com/on/

将监听器绑定到document，以便稍后可以添加按钮：

$(document).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, 
  });
});

这相当于jQuery的已弃用/已删除的live函数。

相关文章：