做商品属性的时候,需要动态添加商品属性,但是在添加啦输入框后再点击删除按钮删除不了,开始是这样写的:
$('#panel-product-property .property-remove').each( (_index, element) => $(element).on('click', () => { const destroyFiledName = 'product_properties[][_destroy]' const destroyFiled = `<input type="hidden" name="${destroyFiledName}" value="true">` $(element).parent().find('input').attr('readonly', 'readonly') $(element).find('i').removeClass('fa-minus').addClass('fa-remove') $(element).find('i').after(destroyFiled) }) ) 这是因为页面生成的时候并没有添加的元素, 所以把事件绑定到生成的元素,js是找不到的,那我们就需要找个js等找到的元素,那就是父级元素,然后通过父级元素绑定事件,修改如下:
$('#panel-product-property').on('click', '.row .property-remove', (element) => { const currentTag = $(element.currentTarget) const destroyFiledName = 'product_properties[][_destroy]' const destroyFiled = `<input type="hidden" name="${destroyFiledName}" value="true">` currentTag.parent().find('input').attr('readonly', 'readonly') currentTag.find('i').removeClass('fa-minus').addClass('fa-remove') currentTag.find('i').after(destroyFiled) }) 使用on事件绑定click,并跟子元素绑定
on('click', '.row .property-remove', (element) => {
