jquery 为新元素追加事件有关问题
jquery 为新元素追加事件问题
在网上看了四种为新元素追加事件的方法。
觉得其中一个方法可以改进一下。
就表格问题说:
原方法是这样:
$(document).ready(function(){
$(':button[value="删除"]').click(function(){
$(this).parents('tr').remove();
});
$(':button[value="新增"]').click(function(){
$('<tr><td>'+$(':text').val()+'</td><td><input type="button" value="删除" /></td></tr>')
.find(':input')
.click(function(){
$(this).parents('tr').remove();
})
.end()
.appendTo($('table'));
});
});
是先在你要加的元素上找到文本框,加事件,然后退回破坏性操作前,在加该元素、
这样也太麻烦了。
为什么不在新增元素后,同时追加事件呢?
改进之后:
$(document).ready(function(){
function deltr(){
$(this).parents("tr").remove();
};
$(':button[value="删除"]').click(deltr);
$(':button[value="新增"]').click(function(){
$('table tr:last-child ').after('<tr><td>新增行</td><td><button value="删除">删除</button></td></tr>');
$(':button[value="删除"]').click(deltr);
});
});
多简单啊。
在网上看了四种为新元素追加事件的方法。
觉得其中一个方法可以改进一下。
就表格问题说:
原方法是这样:
$(document).ready(function(){
$(':button[value="删除"]').click(function(){
$(this).parents('tr').remove();
});
$(':button[value="新增"]').click(function(){
$('<tr><td>'+$(':text').val()+'</td><td><input type="button" value="删除" /></td></tr>')
.find(':input')
.click(function(){
$(this).parents('tr').remove();
})
.end()
.appendTo($('table'));
});
});
是先在你要加的元素上找到文本框,加事件,然后退回破坏性操作前,在加该元素、
这样也太麻烦了。
为什么不在新增元素后,同时追加事件呢?
改进之后:
$(document).ready(function(){
function deltr(){
$(this).parents("tr").remove();
};
$(':button[value="删除"]').click(deltr);
$(':button[value="新增"]').click(function(){
$('table tr:last-child ').after('<tr><td>新增行</td><td><button value="删除">删除</button></td></tr>');
$(':button[value="删除"]').click(deltr);
});
});
多简单啊。