Question

我一直在使用JQuery，我在JFiddle上尝试了我的代码并且它工作正常但是当我在我的网站上执行它根本不起作用时，基本上我需要在我的列表项时发送一个事件单击用户列表。

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

$("#userlist-container > li").click(function(e) {
    alert("TEST");
    var username = "@" + this.html + " ";
    $("TxtMessage").value(username);
    $("TxtMessage").focus();
});

编辑：

页面加载后，它会连接到服务器并在<li>lalala</li>内添加userlist-container。

Answer 1

绑定中的选择器错误：

$("#userlist-container > li")

您的HTML没有li：

<div id="userlist-container">
    <div id="userlist-title">User List</div><br />
</div>

此外，您似乎错过了事件中id选择器的#。

所以你的活动应该类似于：

$("#userlist-container > div").click(function(e) {
    alert("TEST");
    var username = "@" + this.html + " ";
    $("#TxtMessage").value(username);
    $("#TxtMessage").focus();
});

修改

应该告诉你们，一旦它做了一些wizzard 东西，李的添加，所以实际上有li标签。

我将您的代码添加到小提琴中，并且在检查DOM时似乎没有添加li标记。

fiddle

但这可能只是小提琴，不确定。我假设如果你使用的是li标签，你需要使用on使用委托绑定，如果你使用的是jquery 1.7或更高版本，或者delegate如果你使用1.6或更早版本。 / p>

与此类似：

// 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();
});

Answer 2

您的选择器错误，请添加＃前缀以指示ID

$("#TxtMessage").value(username);
$("#TxtMessage").focus();

如果您的点击事件甚至没有触发，请确保在文档加载后附加事件

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

Jquery li点击事件未触发

2 个答案: