关于jquery的一个小问题
本文介绍了关于jquery的一个小问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
$(document).ready(function(){
$('#button').click(function(){
var toAdd = $('input[name=checkListItem]').val();
$('.list').append("<div class='item'>"+toAdd+"</div>");
});
//==法1(不可行)===
$('.item').click(function(){
$(this).remove();
});
//==法2(不可行)==
$(document).ready(function(){
$('.item').click(function(){
$(this).remove();
});
});
//==法3(可行)==
$(document).on('click', '.item', function(){
$(this).remove();
});
});
代码目的:实现todolist功能,点击button添加.item条目,点击条目删除条目;
问题:为什么法1和法2不可行,而法3可行?
解决方案
1和2是一样的,因为这段代码本身就在ready
事件里执行的,所以2的ready
相当于立即执行。
之所以这两个方法不可行是因为它们执行的时候还没有item
元素,所以它们的选择器没有作用,自然添加事件的代码也是没有作用的。
第三种方法可以是因为将事件代理到了document
上面,这样任何时候都能正常触发点击事件,而传入的选择器参数是在每次点击的时候才会用来选择元素的,所以能够选中item
元素
这篇关于关于jquery的一个小问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文