Problem with binding event handler to a dynamically created element

Question

I have just started learning HTML, CSS and jQuery and I am new. I searched for binding event handlers to dynamically added elements and I found out I have to use the parent of the dynamic element as the static selector and add the dynamic element after the event method ( Correct me if I am wrong).
$(staticAncestors).on(eventName, dynamicChild, function() {});
But I do not know why the code below does not work when I change :

$("#p1") with $(this)
or
$(document) with $("div")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("div").click(function(){
        $(this).html('<p id="p1" style="background: red;">Paragraph one</p> <p>Paragraph two</p>').css('margin', '15px 15px 15px 15px');
    });
    $(document).on('click', '#p1', function(){
        $("#p1").css('background-color', 'blue');
    });
});

</script>
</head>
<body>
<div> It's a div. </div>
</body>
</html>

Very strange. Adding console.log(this.id); shows that the handler is running. But for some reason the CSS isn't changing. — Barmar
– Barmar, Commented Oct 20, 2020 at 20:17

Mohsin Ali · Accepted Answer · 2020-10-20 20:20:03Z

3

According to Jquery Docs https://api.jquery.com/on/

By default, most events bubble up from the original event target to the document element (In your case from #p1). At each element along the way, jQuery calls any matching event handlers that have been attached. A handler can prevent the event from bubbling further up the document tree (and thus prevent handlers on those elements from running) by calling event.stopPropagation().

Here is your working code.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("div").click(function(){
        $(this)
        .html('<p id="p1" style="background: red;">Paragraph one</p> <p>Paragraph two</p>')
        .css('margin', '15px 15px 15px 15px');        
        
    });

    $("div").on('click', 'p', function(event){
        event.stopPropagation();
        $(this).css('background-color', 'blue');
    });
});

</script>
</head>
<body>
<div> It's a div. </div>
</body>
</html>

answered Oct 20, 2020 at 20:20

Mohsin Ali

5184 silver badges16 bronze badges

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

4 Comments

Barmar Over a year ago

Ahh, the problem is that the other event handler is running and replacing the html again, wiping out the CSS change.

Mohsin Ali Over a year ago

Yes, if you print following in console console.log($(this)); you'll get Node but when you click on that node you will get a info message like this "Node cannot be found in the current page."

someone Over a year ago

So you mean that the first .click function overrides the .on(click) function? If you mean that this is the problem, why using $(document) and $("#p1") works but changing any of them stops the code snippet? Even if you only change $("#p1") with $(this) it prevents the code from running.

Mohsin Ali Over a year ago

@someone $(document) works because document is the parent of div. When you use div it is the same element that has already click listener attached.

Collectives™ on Stack Overflow

Problem with binding event handler to a dynamically created element

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related