joel24 Posted July 1, 2009 Share Posted July 1, 2009 I have a page which allows users to edit rows in the table, When they click modify it uses a Jquery/javascript $.post function This posts to a PHP page which sends back a form. This all works fine, however, in the form I have a drop down menu where if certain values are selected I need different options to be shown/hidden - this works fine on elements that are on the page when it loads, but the jquery doesn't seem to recognize any of the elements in the retrieved form Take for example the following: HTML Page <html> <head> <script type="text/javascript"> jQuery(document).ready(function() { $('.editItem').click(function(event) { event.preventDefault(); $.post("test.php", {}, function(data) { if (data.length > 0) { $('#testDiv').html(data); } else { $('#testDiv').html("<div align='center'>Error retrieving item details</div>"); } }); }); //test function for testButton $('.testButton').click(function(event) { event.preventDefault(); alert('This test works!'); }); }); </script> </head> <body> <form id="test"> <button id="formRetrieval">Retrieve Form!</button> <button class="testButton">Test Function!</button> </form> <div id="testDiv"> </div> </body> </html> this is the php file the jquery posts to... test.php <?php //just a dummy script to echo the form echo '<form id="test"> <button class="testButton">Click me!</button> </form>'; ?> In the above, if I've typed it all correctly, only the first TestFunction button will display an alert (the one on the HTML page). When the 'Retrieve Form' button is clicked, it will load a new form into the testDiv and there will be a button with the same class 'testButton' (same as teh test function button), however, it will not display the alert. If I had written a function, say, showAlert() which showed an alert, and set the button to onclick="showAlert()" then it would work. In other words, the classes/id's of the elements which are being loaded through the PHP / post function aren't being identified... Hope this all makes sense, Any help would be greatly appreciated! Quote Link to comment https://forums.phpfreaks.com/topic/164340-solved-javascriptjquery-post-to-recognize-retrieved-elements/ Share on other sites More sharing options...
trq Posted July 1, 2009 Share Posted July 1, 2009 You need to move you code so it binds after the new elements are added to the dom. jQuery(document).ready(function() { $('.editItem').click(function(event) { event.preventDefault(); $.post("test.php", {}, function(data) { if (data.length > 0) { $('#testDiv').html(data); $('.testButton').click(function(event) { event.preventDefault(); alert('This test works!'); }); } else { $('#testDiv').html("<div align='center'>Error retrieving item details</div>"); } }); }); }); Quote Link to comment https://forums.phpfreaks.com/topic/164340-solved-javascriptjquery-post-to-recognize-retrieved-elements/#findComment-866967 Share on other sites More sharing options...
RichardRotterdam Posted July 1, 2009 Share Posted July 1, 2009 jQuery's live function might do the trick for that. this is what it says about that function on the jQuery site Added in jQuery 1.3: Binds a handler to an event (like click) for all current - and future - matched element. Can also bind custom events. Quote Link to comment https://forums.phpfreaks.com/topic/164340-solved-javascriptjquery-post-to-recognize-retrieved-elements/#findComment-867070 Share on other sites More sharing options...
joel24 Posted July 2, 2009 Author Share Posted July 2, 2009 got it working with the jquery 'live' function! thanks dj kat & thorpe Quote Link to comment https://forums.phpfreaks.com/topic/164340-solved-javascriptjquery-post-to-recognize-retrieved-elements/#findComment-867641 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.