javascript Jquery li点击事件未触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14657062/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery li click event not firing
提问by user1763295
I've been using JQuery and I tried my code on JFiddle and it worked fine but when I do it on my site it doesn't work at all, basically I need a event to be sent when a list item in my userlist is clicked.
我一直在使用 JQuery 并且我在 JFiddle 上尝试了我的代码并且它运行良好但是当我在我的网站上这样做时它根本不起作用，基本上我需要在我的用户列表中的列表项被点击时发送一个事件.
HTML
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://dl.dropbox.com/s/r5pzakk4ikvck3t/style.css?dl=1">
<script src="https://www.dropbox.com/s/2hdvqa4ma51m0pw/jquery-1.9.0.min.js?dl=1"></script>
<title>Chat</title>
</head>
<body>
<div id="userlist-container">
<div id="userlist-title">User List</div><br />
</div>
<div id="main-container">
<div id="messages">
</div>
</div>
<div id="control-container">
<input type="text" id="TxtMessage" placeholder="Message" onKeyPress="SendMsg(event)" style="text-align:center;" >
</div>
<div id="alert-container" hidden="hidden">
<div id="alert-main">
<span id="alert-content"></span>
</div>
</div>
</body>
</html>
Javascript
Javascript
$("#userlist-container > li").click(function(e) {
alert("TEST");
var username = "@" + this.html + " ";
$("TxtMessage").value(username);
$("TxtMessage").focus();
});
EDIT:
编辑：
Once the page has loaded it connects to the server and adds <li>lalala</li>inside the userlist-container.
页面加载后，它会连接到服务器并添加<li>lalala</li>到userlist-container.
回答by Nope
Your selector in the bind is wrong:
您在绑定中的选择器是错误的：
$("#userlist-container > li")
There is no liyour HTML is:
没有li你的 HTML 是：
<div id="userlist-container">
<div id="userlist-title">User List</div><br />
</div>
Also you seem to be missing #for the id selector inside the event.
此外，您似乎缺少#事件中的 id 选择器。
So your event should probably be similar to:
所以你的事件应该类似于：
$("#userlist-container > div").click(function(e) {
alert("TEST");
var username = "@" + this.html + " ";
$("#TxtMessage").value(username);
$("#TxtMessage").focus();
});
Edit
编辑
should have probably told you guys that once it does some wizzard stuff, li's get added so there are actually li tags in there.
应该告诉你们，一旦它做了一些 wizzard 的东西，li 就会被添加，所以那里实际上有 li 标签。
I added your code to a fiddle and no litags seem to be added when inspecting the DOM.
我将您的代码添加到了一个小提琴中，并且li在检查 DOM 时似乎没有添加任何标签。
The fiddle
该小提琴
That could be just the fiddle though, not sure. I'm assuming if the litags are injected that you need to use delegate binding using onif you are using jquery 1.7 or later or delegateif you are using 1.6 or earlier.
不过，这可能只是小提琴，不确定。我假设如果li您使用的on是 jquery 1.7 或更高版本，或者delegate您使用的是 1.6 或更早版本，则是否需要使用委托绑定来注入标记。
Similar to this:
与此类似：
// jQuery 1.7 or later
$("#userlist-container").on("click", ">li", function(){
alert("TEST");
var username = "@" + this.html + " ";
$("#TxtMessage").value(username);
$("#TxtMessage").focus();
});
// jQuery 1.4.3 to 1.6.x
$("#userlist-container").delegate(">li", "click", function(){
alert("TEST");
var username = "@" + this.html + " ";
$("#TxtMessage").value(username);
$("#TxtMessage").focus();
});
回答by lostsource
Your selectors are wrong, add the # prefix to indicate an id
你的选择器错了，加#前缀表示id
$("#TxtMessage").value(username);
$("#TxtMessage").focus();
If your click event isn't even firing, make sure that you are attaching the event afterthe document is loaded
如果您的点击事件甚至没有触发，请确保在加载文档后附加该事件
$(document).ready(function(){
//code here
});
