我的代码:
<script>
function abc(){
for (var i = 0; i < 3; i ++)
{
var t = $('<li></li>').text(i);
$("ol").prepend(t);
}
}
$(document).ready(function(){
$("li").click(function(){
$(this).hide();
});
});
</script>
HTML:
<body>
<button onclick = "abc()">asdf</button>
<p>If you click on me, I will disappear.</p>
<ol>
<li>Click me away!</li>
<li>Click me too!</li>
</ol>
</body>
为什么当我点击创建的(li)时 - 它不隐藏? 我该怎么办?
答案 0 :(得分:2)
因为加载DOM时,尚未添加<li>
个元素。您只需点击即可添加它们。
这里有几种解决方案。一种是将事件直接绑定到创建的元素:
for (var i = 0; i < 3; i++) {
$("<li></li>").text(i).on("click", function() {
$(this).hide();
}).prependTo("ol");
}
DEMO: http://jsfiddle.net/Xgr22/
另一种方法是使用事件委派:
$("ol").on("click", "li", function() {
$(this).hide();
});
答案 1 :(得分:1)
试试这个:
$(document).ready(function(){
$('ol').on('click','li',function(){
$(this).hide();
});
});
这可确保所有“li”元素在单击时触发单击处理程序,无论它们是否已创建,还是稍后创建它们。
答案 2 :(得分:0)
注意:生活已经贬值!!这是如何在jQuery 1.7之前做到的。
取决于您使用的jQuery版本,如果它在1.7之前,这将起作用
<script>
function abc(){
for (var i = 0; i < 3; i ++)
{
var t = $('<li></li>').text(i);
$("ol").prepend(t);
}
}
$(document).ready(function(){
$("li").live(function(){
$(this).hide();
});
});
</script>
答案 3 :(得分:-1)
尝试:
$('li').on('click', function ()
{
$(this).hide();
});