JavaScript / jQuery如何正確執行.click功能？

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

您需要在此處使用事件委托 ，因為您的按鈕是動態添加的，因此事件委托將幫助您將click事件附加到這些新創建的按鈕上：

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

另外id是唯一的，您需要使用class作為按鈕。

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);
});