Question

我根据所选的表单输入动态生成了一些按钮：

$.each(fields, function (i, field) {
  var field_id = $('[name=' + field.name + ']').closest("fieldset").attr('id');
  $("#results").append('<button id="jumpToThisStep" data-id="'+field_id.replace('q','')+'">'+field.value+ ' ' +'</button>');
});

}

在我的doc.ready函数中，我有以下内容：

  $('#jumpToThisStep').click(function() {
    var jump_to = $(this).data('id');
    showStep(jump_to);
  });

HTML：

<button id="jumpToThisStep" data-id="0"> ... </button>
<button id="jumpToThisStep" data-id="1"> ... </button>
<button id="jumpToThisStep" data-id="2"> ... </button>

检查元素后，它们都具有正确的data-id绑定。但是唯一一个发射的是第一个。什么阻止其他人预先形成他们的.click？

Answer 1

您需要在此处使用event delegation，因为您的按钮是动态添加的，因此事件委派会帮助您将click事件附加到这些新创建的按钮：

$('#results').on('click', '.jumpToThisStep', function() {
    var jump_to = $(this).data('id');
    showStep(jump_to);
});

同样id是唯一的，您需要使用类作为按钮。

Answer 2

HTML DOM id必须是唯一的。使用class代替。

<button class="jumpToThisStep" data-id="0"> ... </button>
<button class="jumpToThisStep" data-id="1"> ... </button>
<button class="jumpToThisStep" data-id="2"> ... </button>

如果要在文档就绪事件之后将DOM上的事件绑定到文档，则必须使用event delegation。

$('#results').on('click', '.jumpToThisStep',function() {
    var jump_to = $(this).data('id');
    showStep(jump_to);
});

JavaScript / jQuery怎么做.click功能正常？

2 个答案: