Jquery click function only works after the second click

Question

I created an ul dynamically, but when i used click function on the a tag inside the li tag, it only works after the second click. Here is my script

var uList;
    $(document).ready(function () {
        uList = $("#room");
        $("#btn").click(function () {
            appendLI();
        });

    });
    function test() {
        if ($("#room li").length > 0) {
            $("li .roomName").on("click", function () {
                alert($(this).text());
            });
        }
    }
    function appendLI() {
        var li = $("<li/>").appendTo(uList);
        var aaa = $("<a/>").prop("class", "roomName").prop("href", "javascript:test();").text("Google 1").appendTo(li);
    }

Here is my HTML

 <input type="text" autofocus/>
<ul id="room">
</ul>
<input type="button" id="btn" value="SET" />

First: var li = $("<li/>").appendTo(uList); You're trying to append to an undefined variable (uList) instead of an element. Second: using global variable is bad. Thirth: you shall define appendLI function before using. — Tân
– Tân, Commented Feb 14, 2017 at 3:40
Thank you for your answer, however, the uList is defined at the $(document).ready, why was is undefined? Can you explain why using global variable be considered bad? — Khoa Đỗ
– Khoa Đỗ, Commented Feb 14, 2017 at 4:03

Mark · Accepted Answer · 2017-02-14 03:46:45Z

4

The on click event isn't written right right;

function test() {
        if ($("#room li").length > 0) {
            $("#room").on("click", '.roomName', function () {
                alert($(this).text());
            });
        }
    }

I re-wrote your block of code here for you;

http://codepen.io/anon/pen/PWVmjJ

answered Feb 14, 2017 at 3:46

Mark

2,0711 gold badge16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Khoa Đỗ Over a year ago

thank you!! It works, however, may you point out where i was wrong? Why did it work on the 2nd time?

godfrzero Over a year ago

@KhoaĐỗ Event delegation. You were attaching events to li .roomName elements that don't exist yet. This snippet attaches the event to li, then checks if the original trigger was .roomName on click. This will keep working even if you add .roomName to li after binding the event listener.

Khoa Đỗ Over a year ago

@godfrzero thanks. Just found the document about event delegation learn.jquery.com/events/event-delegation

Collectives™ on Stack Overflow

Jquery click function only works after the second click

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related