简体   繁体   English

jQuery Li Click事件未触发

[英]Jquery li click event not firing

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 Java脚本

$("#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 . 页面加载后,它将连接到服务器,并在userlist-container添加<li>lalala</li>

Your selector in the bind is wrong: 您在绑定器中的选择器是错误的:

$("#userlist-container > li")

There is no li your 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. 应该会告诉你们,一旦它做了一些奇怪的事情,就会添加li,因此实际上里面有li标签。

I added your code to a fiddle and no li tags seem to be added when inspecting the DOM. 我将您的代码添加到小提琴中,并且在检查DOM时似乎未添加li标签。

The fiddle 小提琴

That could be just the fiddle though, not sure. 但这可能只是摆弄,不确定。 I'm assuming if the li tags are injected that you need to use delegate binding using on if you are using jquery 1.7 or later or delegate if 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();
});

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 after the document is loaded 如果您的click事件没有触发,请确保加载文档附加了该事件

$(document).ready(function(){  
    //code here  
}); 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM