Question

我尝试过以下代码，其中我遇到了<li>的问题，这是由jquery动态插入的，<li>上的Click事件根本没有触发。

我应该使用.on()还是.delegate()？

代码

<!DOCTYPE html>
<html>
<head>
<script type=text/javascript     src=http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js></script>
<script type=text/javascript>
$(document).ready(function(){
$("ul li").on("click",function(){
    alert("hi");

});
$(":button").click(function(){
    var ul=$("ul");
    var txt=$(":text").val();
    ul.append("<li>" + txt + "<button>X</button></li>");
});


}); 

</script>
<style>
button
{
border:none;
float:right;
width:100px;
height:100px;
background-color:white;
cursor:pointer;
font-size:30px
}
body
{
background-color:#AB19CD;

}
div
{
margin:100px auto;
width:520px;
height:100px;
text-align:center;
line-height:100px
}
input[type=text]
{
width:400px;
height:100px;
border:none;
font:300 30px/100px 'Verdana';
box-sizing:box-border;
outline:none;
padding-left:10px;
background-color:rgba(0,0,0,0.15);
float:left
}
input[type=button]
{
width:100px;
height:100px;
border:none;
font:300 30px/100px 'Verdana';
float:left
}
ul
{
list-style-type:none;
padding:0
}
li
{
float:left;
width:500px;
height:100px;
background-color:white;
text-align:left;
padding-left:10px;
font:300 30px/100px 'Verdana';
margin-top:10px
}
</style>
</head>
<body>
<div>
<input type=text placeholder=Password><input type=button value=Add>
<ul></ul>
</div>

</body>
</html>

请帮我找到答案

Answer 1

你快到了。改变

$("ul li").on("click",function(){
    alert("hi");
});

到

$("ul").on("click", "li" ,function(){
    alert("hi");
});

通过这种方式，您将静态ul将点击事件委托给li。

JQuery on事件不适用于动态listitem

1 个答案: