我使用以下代码添加按钮:
$('.dishes').prepend($('<div class="row" data-dishid="'+dishid+'"><div class="col-md-8">'+dishname+'<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button></div></div>'));
但是下面的代码没有捕获按钮单击(如果它是静态html的一部分,它使用相同的代码):
$("button.close").click(function() {
var row = $(this).closest('.row');
var dishid = row.attr('data-dishid');
});
我该如何解决?
请参阅the sample code。
答案 0 :(得分:4)
对于动态创建的元素,您应该使用.on('click', selector, callback)
像
$(document).on("click", "button.close", function() {
var row = $(this).closest('.row');
var dishid = row.attr('data-dishid');
});
答案 1 :(得分:3)
动态生成的元素需要event delegation。尝试以下。
$(document).on('click', "button.close", function () {
var row = $(this).closest('.row');
var dishid = row.attr('data-dishid');
console.log(dishid);
});
<强> WORKING DEMO 强>
答案 2 :(得分:1)
I have seen the code. You have to call the click function of the dynamic element immediately after the element appended. Try the code below.
$("#add").on('click', function() {
$('.dishes').prepend($('<div class="row" data-dishid="'+ "test" +'"><div class="col-md-8">'+ " test " +'<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button></div></div>'));
$("button.close").on('click', function() {
var row = $(this).closest('.row');
var dishid = row.attr('data-dishid');
console.log(dishid);
});
});
答案 3 :(得分:0)
$("button.close").on("click", function(){
console.log('ok');
});
您需要使用on()函数来生成动态生成的html元素
答案 4 :(得分:0)
尝试:
$("button.close").on("click", function() {
console.log('ok');
});
您需要动态创建的DOM元素的.on事件处理程序。
更新:
您不需要在前置内容之前放置jQuery $
。这是你的代码的工作小提琴。
答案 5 :(得分:0)
这是您的updated code。
我改变了:
$("button.close").click(function() {
var row = $(this).closest('.row');
var dishid = row.attr('data-dishid');
});
要:
$(".dishes").on('click', 'button.close', function() {
var row = $(this).closest('.row');
var dishid = row.attr('data-dishid');
console.log(dishid);
});
这个问题在整个互联网上得到解答,这是jQuery网站的一个片段:
事件处理程序仅绑定到当前选定的元素;他们 在您的代码调用.on()时必须存在。或者,使用委派事件来附加事件 处理程序。
委派事件的优势在于它们可以处理来自的事件 稍后添加到文档中的后代元素。
答案 6 :(得分:0)
检查代码后,点击事件应该正常。也许问题依赖于时间。我的假设是你有以下代码:
$("button.close").click(function() {
var row = $(this).closest('.row');
var dishid = row.attr('data-dishid');
});
您还没有在DOM上附加对象。每次调用下面的方法时,都必须立即绑定click事件。最好是将代码放在一起检查它是否有效。
$('.dishes').prepend($('<div class="row" data-dishid="'+dishid+'"><div class="col-md-8">'+dishname+'<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button></div></div>'));
$("button.close").click(function() {
var row = $(this).closest('.row');
var dishid = row.attr('data-dishid');
});