Why doesn't HTML generated dynamically with PHP respond to JavaScript?

Question

HTML on the body works, but one coming from PHP doesn't respond at all, why? How do i solve this?

Here's how i'm generating the HTML.

<?php
echo '<div id="TestClick">Click me</div>'
?>

and JavaScript.

$('#TestClick').click(function(e){
    alert ('working')
});

But the works.

<body>
<div id="TestClick">Click me</div>

</body>

ok here's how im getting that html from PHP using ajax.

$.ajax({
    type:"GET",
     url:"../php/feed.php"
    }).done(function(feedback){
$('#feed').html(feedback)
});

There's no difference in the browser between these two approaches, so there's something about the way you're generating the page that's causing the problem. You should post more code. — user1864610
– user1864610, Commented Nov 27, 2013 at 20:09

Simon Boudrias · Accepted Answer · 2013-11-27 20:24:46Z

5

If your JavaScript is in the HEAD of the page, make sure you wait for document.ready event to bind the DOM events.

$(document).ready(function() {
    $('#TestClick').click(function(e){
        alert ('working')
    });
});

This is a general best practice because the DOM (the HTML code) need to be parsed before JavaScript can interact with it.

Note that there's a shorthand with jQuery $(document).ready:

$(function() {
    $('#TestClick').click // etc ...
});

If you're loading this element via AJAX, then you need to handle events once the AJAX request is completed and element added to the DOM. Also, you can use events bubbling to delegate the event listener on a higher level DOM element (for example document).

$(document).on('click', '#TestClick', function() { /* your stuff */ });

Last but not least, make sure you don't have duplicated ID in your DOM. This could cause breakage too.

edited Nov 27, 2013 at 20:24

answered Nov 27, 2013 at 20:11

Simon Boudrias

44.9k16 gold badges109 silver badges137 bronze badges

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

5 Comments

Relm Over a year ago

my js is loaded from an external script in the head and has $(document).ready: in place.

Santiago Rebella Over a year ago

I think this is not going to solve the problem as the element is being created after the document is ready through ajax

Milan and Friends Over a year ago

Try to load the script just before the </body> tag and try $('#TestClick').on('click', function(e) { ...

Simon Boudrias Over a year ago

@Eustatia Added extra notes about ajax and event delegation.

Relm Over a year ago

This is the trick '$(document).on('click', '#TestClick', function() { /* your stuff */ });', thanks Simon.

Santiago Rebella · Accepted Answer · 2013-11-27 20:19:09Z

0

Probably your element is being created after the click handler is called and as it is not there, the handler is not attached.

Try running that javascript after the php code

EDIT

try

$.ajax({
    type:"GET",
    url:"../php/feed.php"
}).done(function(feedback){
    $('#feed').html(feedback);
    $('#TestClick').click(function(e){
        alert ('working')
    });
});

edited Nov 27, 2013 at 20:19

answered Nov 27, 2013 at 20:10

Santiago Rebella

2,4492 gold badges23 silver badges29 bronze badges

7 Comments

lefty55104 Over a year ago

PHP is displayed before JavaScript. It wouldn't matter where in the file it is placed.

Santiago Rebella Over a year ago

I know, I mean in time not in place

Santiago Rebella Over a year ago

@Danielle Zarcaro the php could run after the Javascript code in a lot of cases

Santiago Rebella Over a year ago

@jraede like in the question, the php code of feed.php will be rendered once the ajax request is made. before that there is no #TestClick element in the DOM as this element is created once feed.php echo executes, so first Javascript code attaches an event handler to an unexistant element, and then php code creates the element. first was Javascript, second php.

jraede Over a year ago

No...PHP runs on the server and completes its execution before any response ever gets to the client. The element may not have loaded yet when the event handler is bound, but that is way past the point of PHP having anything to do with it.

|

Joaquín O · Accepted Answer · 2013-11-27 21:38:38Z

0

When you load something using AJAX after the page was loaded, the .click() event has been binded to the existing DOM Elements, but not to the new ones.
You could try this:

$.ajax({
    type:"GET",
     url:"../php/feed.php"
    }).done(function(feedback){
       $('#feed').html(feedback).click(function(e){
           alert ('working')
       )};
    });
});

answered Nov 27, 2013 at 21:38

Joaquín O

1,4511 gold badge9 silver badges16 bronze badges

Collectives™ on Stack Overflow

Why doesn't HTML generated dynamically with PHP respond to JavaScript?

3 Answers 3

5 Comments

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related