做商品属性的时候,需要动态添加商品属性,但是在添加啦输入框后再点击删除按钮删除不了,开始是这样写的:
$('#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) => {