javascript - 这句话为什么放在位置一生效,放在位置二就失效了
本文介绍了javascript - 这句话为什么放在位置一生效,放在位置二就失效了的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
如题所示,这一段如果放在位置1,就可以正确执行,在位置2就不行了,有大神知道为什么吗?
详细描述就是:
*这一段是做一个功能,使input输入框输入后点击回车就在div顶部添加一个tag,然后点击一个tag就关闭你所点击的那个tag。这两段都包在$(function(){})里面了
以下是源码:
//input
$(".filterBox table input[type=text]").keydown(function(event){
//添加tag
if(event.keyCode == 13){
if($(this).val() == ""){
return;
}else{
var html = "<span class='search-tags'>" + $(this).val() + "<a href='javascript:void(0)'>x</a></span>"
$(".tagsGroup").append(html);
}
}
//移除tag
/* $(".tagsGroup").children("span").on("click",function(){
$(this).hide();
}) */
})
//移除tag
$(".tagsGroup").children("span").on("click",function(){
$(this).hide();
})
解决方案
位置1: 会在你每次触发keydown的时候会获取 $(".tagsGroup").children("span") 然后绑定click事件。
位置2: 在页面初始化的时候为现有的$(".tagsGroup").children("span") 绑定click事件。
如果在位置2,你新添加的元素是没有click事件的。位置2可以是因为你每次添加之后又重新给元素绑定了一次click。
如果不想每次都重新绑定一次 可以用
$(document).on("click",".tagsGroup > span", function(){$(this).hide();});
如果search-tag在页面里只会使用在这里的话可以把 ".tagsGroup > span" 替换为 ".search-tag"
这篇关于javascript - 这句话为什么放在位置一生效,放在位置二就失效了的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文