新增元素在on()函数执行之前添加，为什么不能调用on()函数
0
悬赏园豆：10
[已解决问题]
解决于 2015-08-10 23:48
js代码如下 jq2.1.3
$("ul li").on("click",".votedel",function(){
vote_count--;
$(this).parent().remove();
});
html代码
<ul>
<span class="votetitleleft">选项:最多可填写<script type="text/javascript">document.write(vote_max);</script>个选项</span>
<span class="votetitleright"><input type="checkbox" id="voteconfig1">多选模式</span>
<li class="votechoice">
<input type="text" name="choice1"/><a class="votedel" title="删除"></a>
</li>
<li class="votechoice">
<input type="text" name="choice2"/><a class="votedel" title="删除"></a>
</li>
<span id="addchoice" title="增加一个选项" class="addchoice">+增加一个</span><span id="complete">完成</span>
</ul>
问题补充：
在jq1.7下用live()函数新增的元素可以删除 即使是live()函数没有执行过 而在jq2.1.3下使用on()函数 无论on()函数是否执行过新增元素都无法执行on()函数
附上添加节点的代码 希望可以找出问题i
$("#addchoice").click(function(){
if(vote_count<vote_max){
if(vote_count>6){
$("#vote").css("height",$("#vote").css("height")+35);
}
vote_count++;
$('<li class="votechoice">'+
'<input type="text" name="choice"/><a class="votedel" title="删除"></a></li>')
.insertBefore(".addchoice");
}
else{
alert("已经"+vote_max+"个了，不能在添加了!");
}
});
最佳答案
0
你这样做肯定是对的！！至于你说的没有执行，估计是js错误了，你可以在浏览器中控制台下看下是否有js错误，还有就是你所有的代码都是应该放在$(function(){});中的，这是页面中Dom树完全加载完才执行这里面的代码，要是你写在外面，这时你操作的节点还未加载从而出现js错误！
收获园豆：10
已存在的结点单步调试没有问题 但是新建的结点根本就没有进去js的on()函数 这是为什么啊
@小kk06:
要不这这样试试：
$(document).on("click",".votedel",function(){
vote_count--;
$(this).parent().remove();
});
@Recluse_Xpy: 这样就可以了 请问是为什么啊
@小kk06:
这个问题之前有遇见过，具体原因忘了！！只需要记得如果是动态添加的元素的话，再对其触发事件建议这么做！！
@Recluse_Xpy: 可是如果前面要指定父元素怎么办 后面的选择器如果只是选中a标签 一定加一个唯一的类名或者id才可以吗？
@小kk06:
同样可以实现啊$(document).find()，通过find方法在文档中找到你需要的元素再添加事件即可
@小kk06:
标签也可以啊 直接就是
$(document).on("click","a",function(){
vote_count--;
$(this).parent().remove();
});不就可以了吗!
@Recluse_Xpy: 但是我如果要通过id 或者 class 来定位这个元素呢 find貌似只能用来找标签的吧
@小kk06: 恩，那你就借助标签找呗！比如说：$(document).find("img[name='imgSort']").remove();
@Recluse_Xpy:
$(document).find("ul li").on('click','a',function(){
$(this).parent().remove();
})
问题又来了 在这个里面出现了同样的问题 已存在的可以 新增的不可以 我也是醉了 用js调试这样的了
@小kk06:
你这样填试试：
$(document).find("ul li.votechoice").on('click','a',function(){
$(this).parent().remove();
})
@Recluse_Xpy: 不行 如果只有ul的话就可以。。。什么鬼
@小kk06: 真的无法解决了吗，来鬼了，不信这个邪！！！方便远程吗？？我看下
@小kk06: 我还是觉得没准是你代码写的有问题！
@Recluse_Xpy: 嗯 我qq1096170488
@小kk06: 额 那就不知道了 要再看看吗？
其他回答(2)
0
可以这样$(function（）{$("ul li").on("click",".votedel",function(){
vote_count--;
$(this).parent().remove();
});})
谢谢你的回答 但是事实上我就是那么写的，只不过是上面那部分忘了贴出来，其实一段javascript代码是嵌套在一个$(function(){})中的 顺便问一句 这样放在这个里面和直接写外面有什么区别 我只知道写在里面是在加载的时候就可以用的 但是在外面的时候点击还不是一样会触发 效果应该没有什么区别吧
@小kk06: 去浏览器打个断点调试下，到底进去了没有，
@稳稳的河: 在新建的节点中没有进去 在已存在的结点中有进去
0
你说的问题应该是不存在的，你需要现在a标签中加一点内容，这样才能看到a标签，然后点击a标签，事件是会触发的。
a标签是一个删除的图标
