Click function doesn't run on the elements created by PHP?

Question

I use ajax to call PHP to replace two lines in my HTML file. The original lines still have the expected jquery click function, but the click function does not appear on the new two lines echo'ed by my php file (I made sure the class name is exactly the same).

I look up on the Event listener on Chrome inspect element feature and yep, the .click function is missing in the new lines.

Here are my codes:

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div id="replacable">
    <p class="editable" id="line1">Edit line 1</p>  
    <p class="editable" id="line2">Edit line 2</p>
</div>
<h4 id="click_to_replace">Click to replace line 1 and 2</h4>

<script>
    $('.editable').click(function(){
        alert('ID =  ' + $(this).attr('id'));
    });
    $('#click_to_replace').click(function(){
        $.ajax({
            type: 'POST',
            url: "replace.php",
            data: {id: $(this).attr('id')},
            success: function(newp){
                $('#replacable').replaceWith(newp);
            }
        });
    });             
</script>

The php file:

<?php
 echo '<div id="replacable">
       <p class="editable" id="line3">Edit line 3 NEW</p>   
       <p class="editable" id="line4">Edit line 4 NEW</p></div>'
?>

@LShetty Well frankly it doesn't really matter as this is a bit of a practice I give myself to do, but what idea do you have in mind? — vagaryblue, May 12 '15 at 22:54

T.J. Crowder · Answer 1 · 2015-05-12T12:34:06.487

Your click handler is only attached to the elements that exist when your code hooking up the handler ran.

You can use event delegation for this situation:

$(document.body).on('click', '.editable', function(){
    alert('ID =  ' + this.id); // $(this).attr('id')); - No need for attr here
});

That hooks click on document.body, but only fires the handler if the click passed through a .editable. If it did, jQuery fires the handler as though it were attached directly to the element. That way, you don't care whether the elements are created later or not.

You don't have to use document.body; just use an ancestor element that you won't be replacing.

@LShetty: LOL -- I just copied and pasted, didn't even look at the function *content*. :-) — T.J. Crowder, May 12 '15 at 12:33

score 2 · Accepted Answer · answered May 12 '15 at 12:17

You can use .on() to add click handler to the created element. see below code

$(document).on('click','.editable',function(){
        alert('ID =  ' + $(this).attr('id'));
    });

Above code will attache the click event to the specified selector. See this for more information of .on()

renakre · Answer 3 · 2015-05-12T12:21:17.397

0

You need to use .on() for dynamically created elements.

  $('body').on('click', '#click_to_replace', function(){

edited May 12 '15 at 12:21

answered May 12 '15 at 12:15

renakre

8,001
5
46
99

score 0 · Answer 4 · answered May 12 '15 at 12:19

as of JQuery 1.7 you should use .on

$(document.body).on('click', '.editable', function(){
    alert('ID =  ' + this.id);
});

if you are using jQuery prior to 1.7 then Try using live

$(".editable").live('click', function(){
    alert('ID =  ' + this.id);
});

Note: .live is deprecated.

score 0 · Answer 5 · answered May 12 '15 at 12:23

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div id="replacable">
    <p class="editable" id="line1">Edit line 1</p>  
    <p class="editable" id="line2">Edit line 2</p>
</div>
<h4 id="click_to_replace">Click to replace line 1 and 2</h4>

<script>

    $('#click_to_replace').click(function(){
        $.ajax({
            type: 'POST',
            url: "replace.php",
            data: {id: $(this).attr('id')},
            success: function(newp){
                $('#replacable').replaceWith(newp);
            }
        });
    $('.editable').click(function(){
        alert('ID =  ' + $(this).attr('id'));
    });
    });             
</script>

**Now try this one Hope This will work because your are adding some tags live so those are not present at the time of DOM loading they are formed after the ajax call**

score 0 · Answer 6 · edited May 23 '17 at 11:58

0

You already had good answers but if you want more informations see this similar post, I had the same issue lately and it make me understood well why it couldn't work.

Event binding on dynamically created elements

Greetings

edited May 23 '17 at 11:58

Community

1
1

answered May 12 '15 at 14:15

Daniel

1,172
14
31

Click function doesn't run on the elements created by PHP?

6 Answers6