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)
});
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.
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')
});
});
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')
)};
});
});