我有一些基于所选表单输入动态生成的按钮:
$.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
? 最佳答案
您需要在此处使用event delegation,因为您的按钮是动态添加的,因此事件委托将帮助您将click事件附加到这些新创建的按钮上:
$('#results').on('click', '.jumpToThisStep', function() {
var jump_to = $(this).data('id');
showStep(jump_to);
});
同样,
id
是唯一的,您需要使用class作为按钮。