Hi Mate, I hope somebody could help me on this problem, i have a page which is loaded via ajax. $.ajax({ type: "POST", url: "quote.php", data: 'cl=' + client + '"e=' + quote, success: function(data) { $("#tabs-3").html(data); } }); but when data is loaded to tabs-3 which contains HTML and Javascript code, the Javascript functions gets lost. for instance, data returns the following HTML code. <button class='add'>Add</button> and i have this loaded on page load $('.add').on('click',function(){ ///my code for adding here... }); it doesnt trigger the add then button with the class='add' was loaded from the ajax. is there any work around on this problem? Thank you
Try to hook this listener on parent of button.class element, such as #tabs-3 which will not be changed by ajax. If I'm not mistaken, this is called delegated event in jQuery. Ref: https://api.jquery.com/on/ $('#tabs-3').on('click', '.add', function(){ ///my code for adding here... }); Code (JavaScript):
Im not clicking tabs-3, it is a tab... so when that tabs-3 is loaded with HTML page fetched from url: "quote.php", the id or class which has the click events, lost its functionality.
can you create a javascript jsfiddle for us to see what you've set up sounds ok I'd be trying @hdewantara's idea too if #tabs-3 is the whole area and not just the bit at the top.
I don't use jQuery, but try this or something similar. success: function(data) { $( "#tabs-3" ).append( data ); } Code (markup): http://api.jquery.com/jquery.ajax/
This might be a stupid question on my part, but is your script providing that functionality inside <script> INSIDE #tabs-3? If so jquery's (stupid malfing dumbass innerHTML style) .html method might be overwriting the scripting! Though a more likely answer is that you are trying to add the event BEFORE the element you are targeting even exists. If you do this: $('.add').on('click',function(){ BEFORE your ajax handler ever even runs, OF COURSE it's not attached. It didn't exist yet. ANOTHER reason I keep telling people NOT to use that jQuery garbage. It doesn't even teach you load order properly. ONLY thing you can learn from it is how NOT to write JavaScript!