function not working on append string

Question

I wrote function while clicking a class name. and its works fine. but when i am append a tag with same class name the function is not working on that class.

<script> 
    $(document).ready(function() {

        $("#btn1").click(function(){
            $("p").append(" <b class='test'>Appended text</b>.");
        });

        $(".test").click(function(){
            alert(12);
        });

    });
</script>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<ol>
    <li class="test">List item 1</li>
</ol>

<button id="btn1">Append text</button>

Read about [`Event delegation`](https://learn.jquery.com/events/event-delegation/) — Rayon, Mar 25 '16 at 08:36

Andrew Cheong · Answer 1 · 2016-03-25T08:43:20.747

0

That's because jQuery binds the event at the time you call $(".test").click(...). You need to bind it separately:

$("#btn1").click(function(){
    $("p").append(" <b class='test'>Appended text</b>.")
          .click(function(){alert(12);});
});

edited Mar 25 '16 at 08:43

answered Mar 25 '16 at 08:38

Andrew Cheong

29,362
15
90
145

It will alert '12' twice while click on the "List item 1". – Neethu Mar 25 '16 at 08:41
Fixed. But I'd go with the solutions in the duplicate questions. – Andrew Cheong Mar 25 '16 at 08:43

function not working on append string

1 Answers1