Home/ Questions/Q 9222617
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T03:52:28+00:00

I’ve been using JQuery and I tried my code on JFiddle and it worked

  • 0

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.

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

EDIT:

Once the page has loaded it connects to the server and adds <li>lalala</li> inside the userlist-container.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your selector in the bind is wrong:

    $("#userlist-container > li")

    There is no li your HTML is:

    <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.

    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.

    I added your code to a fiddle and no li tags seem to be added when inspecting the DOM.

    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.

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