Javascript 类在动态生成的按钮jQuery、Bootstrap上无法正常工作
我正在使用jquery、Ajax生成一个表。 一切正常,但“编辑”按钮工作不正常。 我想在单击时复制所有数据-(属性)。 如果我用php做同样的事情,它工作得很好,但是我需要使用jquery。 这是我的密码 ============================表格代码===========Javascript 类在动态生成的按钮jQuery、Bootstrap上无法正常工作,javascript,jquery,html,twitter-bootstrap,Javascript,Jquery,Html,Twitter Bootstrap,我正在使用jquery、Ajax生成一个表。 一切正常,但“编辑”按钮工作不正常。 我想在单击时复制所有数据-(属性)。 如果我用php做同样的事情,它工作得很好,但是我需要使用jquery。 这是我的密码 ============================表格代码=========== $("#get_spare_list").click(function() { var ht = ""; $.ajax({ url: "<?php echo base
$("#get_spare_list").click(function() {
var ht = "";
$.ajax({
url: "<?php echo base_url('Spare/get_all_spare_json'); ?>",
type: 'POST',
dataType: 'json',
data: {"param1": 'value1'},
})
.done(function(data) {
var no = 1;
var ht = "<table class='table'><thead><tr><th>No</th><th>Name</th><th>Code</th><th>Min qty</th><th>uni</th><th>Group</th><th>Sub Category</th><th>Part Number</th><th>Location</th><th>Image</th><th>Barcode</th><th>Tyre</th><th>Back</th></tr></thead>";
$.each(data, function(key, val) {
ht +="<tr>"+"<td>"+no+"</td>"+"<td>"+val.name+"</td>"+"<td>"+val.code+"</td>"+"<td>"+val.min_qty+"</td>"+"<td>"+val.unit+"</td>"+"<td>"+val.group+"</td><td>"+val.sub_category+"</td><td>"+val.part_number+"</td><td>"+val.location+"</td>";
if (val.image) {
ht += "<td><a target='_blank' href='"+"<?php echo base_url('../images/'); ?>/"+val.image+"'><button class='fa fa-picture-o'></button></a></td>";
}else{
ht += "<td></td>";
}
ht += "<td><button class='btn btn-info btn-xs' onclick=PrintBar('val.code')>Print</button></td>";
ht +="<td>"+val.tyre+"</td>";
ht += "<td>";
if (val.reusable) {
ht +="yes";
}else{
ht+="no";
};
ht += "</td>";
ht += "<td><button class='btn edit btn-info btn-xs' data-toggle='modal' data-target='#editModel' data-id='"+val.id+"' data-name='"+val.name+"' data-code='"+val.code+"' data-min_qty='"+val.min_qty+"' data-unit='"+val.unit+"' data-group='"+val.group+"' data-sub_category='"+val.sub_category+"' data-part_number='"+val.part_number+"' data-location='"+val.location+"' data-tyre_number='"+val.tyre+"' data-back='"+val.reusable+"'><span class='fa fa-edit'></span></button></td>";
ht += "</tr>";
no++;
});
$("#js_res").append(ht);
console.log(ht);
})
.fail(function() {
alert("error");
});
});
$(".edit").click(function() {
$("#id").val($(this).data('id'));
$("#name").val($(this).data('name'));
$("#code").val($(this).data('code'));
$("#min_qty").val($(this).data('min_qty'));
$("#unit").val($(this).data('unit'));
$("#group").val($(this).data('group'));
$("#sub_category").val($(this).data('sub_category'));
$("#part_number").val($(this).data('part_number'));
var location = $(this).data('location');
var l1 = location.split("->");
$("#room").val($.trim(l1[0]));
$("#rake").val(l1[1]);
$("#line").val(l1[2]);
$("#box").val(l1[3]);
if ($(this).data('tyre_number')) {
$("input[name=tyre][value=" + $(this).data('tyre_number') + "]").prop('checked', true);
}else{
$("input[name=tyre][value='']").prop('checked', true);
};
if ($(this).data('back') == "1") {
$("#back").attr('checked', true);
}else{
$("#back").removeAttr('checked');
};
});
您可以使用()上的
.on()
函数,而不是单击函数
$(document).on('click','.edit',function(){
将绑定在绑定事件时不存在的.edit元素上的事件。这称为事件委派
这是因为元素是动态生成的,所以在初始页面加载时不存在
使用
从文件中
$(staticAncestors).on(eventName, dynamicChild, function() {});
在您的情况下,它将是:
$(document).on("click", ".edit", function() {
$("#id").val($(this).data('id'));
$("#name").val($(this).data('name'));
$("#code").val($(this).data('code'));
$("#min_qty").val($(this).data('min_qty'));
$("#unit").val($(this).data('unit'));
$("#group").val($(this).data('group'));
$("#sub_category").val($(this).data('sub_category'));
$("#part_number").val($(this).data('part_number'));
var location = $(this).data('location');
var l1 = location.split("->");
$("#room").val($.trim(l1[0]));
$("#rake").val(l1[1]);
$("#line").val(l1[2]);
$("#box").val(l1[3]);
if ($(this).data('tyre_number')) {
$("input[name=tyre][value=" + $(this).data('tyre_number') + "]").prop('checked', true);
}else{
$("input[name=tyre][value='']").prop('checked', true);
};
if ($(this).data('back') == "1") {
$("#back").attr('checked', true);
}else{
$("#back").removeAttr('checked');
};
})
有关此操作不起作用的更多详细信息,请参阅:您的onclick=PrintBar('val.code')的可能重复项应为onclick=PrintBar('“+val.code+”)
非常感谢,它起作用了。我可以知道它不起作用的原因吗?$(文档)。on('click','edit',function(){将绑定.edit元素上的事件,该元素在绑定事件时不存在。这称为event delegation.ohk。谢谢。另外,onclick事件应该可以在这里工作,尽管它是动态生成的。@chigs如果这回答了您的问题,请将其标记为正确答案,以便其他人发现它有用
$(document).on("click", ".edit", function() {
$("#id").val($(this).data('id'));
$("#name").val($(this).data('name'));
$("#code").val($(this).data('code'));
$("#min_qty").val($(this).data('min_qty'));
$("#unit").val($(this).data('unit'));
$("#group").val($(this).data('group'));
$("#sub_category").val($(this).data('sub_category'));
$("#part_number").val($(this).data('part_number'));
var location = $(this).data('location');
var l1 = location.split("->");
$("#room").val($.trim(l1[0]));
$("#rake").val(l1[1]);
$("#line").val(l1[2]);
$("#box").val(l1[3]);
if ($(this).data('tyre_number')) {
$("input[name=tyre][value=" + $(this).data('tyre_number') + "]").prop('checked', true);
}else{
$("input[name=tyre][value='']").prop('checked', true);
};
if ($(this).data('back') == "1") {
$("#back").attr('checked', true);
}else{
$("#back").removeAttr('checked');
};
})