点击功能是不是在jQuery的
工作在我HTML
我有ol
和li
这是我HTML
和我对这些链接脚本一样,当我点击它,我保持着警惕核实它不工作点击功能是不是在jQuery的
$('#namesId ol li').click(function() {
alert('clicked');
//ToDo
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="col-sm-4" id="namesId" style="padding:0px">
<ol style="padding-left: 10px;">
<li class="v"><a href="">Funny 10 second video! - YouTube (360p)</a></li>
</ol>
</div>
点击功能ID不工作什么是它的问题。
正如你所说li
是动态生成的,你必须使用jQuery event-delegation
所以做象下面这样: -
$('#namesId ol').on('click',"li",function(e) {
e.preventDefault();
console.log('clicked');
//ToDo
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-4" id="namesId" style="padding:0px">
<ol style="padding-left: 10px;">
<li class="v"><a href="">Funny 10 second video! - YouTube (360p)</a></li>
<li class="v"><a href="">Wildlife</a></li>
</ol>
</div>
bharath varma很高兴帮助你:) :)。感谢标记。 –
它应该是:
$('#namesId ol li:nth-child(1)').click(function() {
alert('clicked');
//ToDo
}); //for first li click
$('#namesId ol li:nth-child(2)').click(function() {
alert('clicked');
//ToDo
}); //for second li click
没有理由使用':nth-child(1' –
你应该总是给你的答案留下一个解释 –
下面的代码工作正常。
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<ol id="namesId" style="padding-left: 10px;">
<li class="v"><a href="">Funny 10 second video! - YouTube (360p)</a>
</li>
<li class="v"><a href="">Wildlife</a></li>
</ol>
<script>
$('#namesId li').click(function() {
alert('clicked');
//ToDo
});
</script>
</body>
</html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<ol id="namesId" style="padding-left: 10px;">
<li class="v"><a href="">Funny 10 second video! - YouTube (360p)</a>
</li>
<li class="v"><a href="">Wildlife</a></li>
</ol>
<script>
$('#namesId li').click(function() {
alert('clicked');
//ToDo
});
</script>
</body>
</html>
试试这个:
$('#namesId ol').on('click', 'li', function(e){
e.preventDefault();
alert('clicked');
});
不需要从文档 –
一路遍历@AlivetoDie编辑后更好吗? –
是的。顺便说一句,我已经投票给你,因为至少概念是正确的 –
您已指明名称的选择#namesId,但它不是任何地方所定义。
这样说吧,它会工作:
<div id="namesId">
<ol style="padding-left: 10px;">
<li class="v"><a href="">Funny 10 second video! - YouTube (360p)</a>
</li>
<li class="v"><a href="">Wildlife</a></li>
</ol>
</div>
哪里是'namesId' ID? –
“namesId”的定义在哪里? –
你可以包含关于'#namesId'的相关HTML吗? – Vivick