Jquery li 点击事件未触发

Jquery li click event not firing

本文关键字：事件 li Jquery      更新时间：2023-09-26

我一直在使用 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>

爪哇语

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

编辑：

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

绑定

中的选择器是错误的：

$("#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();
});

编辑

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

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

小提琴

不过，这可能只是小提琴，不确定。我假设如果注入了 li 标签，如果您使用的是 jquery 1.7 或更高版本，则需要使用 on 使用委托绑定，如果您使用的是 1.6 或更高版本，则需要使用 delegate 或更早版本。

类似这个：

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

你的选择器是错误的，添加 # 前缀来指示一个 id

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

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

$(document).ready(function(){  
    //code here  
});
相关文章：