jQuery target html from ajax response using a separate function

Question

I have html div which loads empty when the page is first loaded. After that I can click a button which will load fresh html into the div using jquery ajax

$("#control-list a#ms").click(function(){
    var postData = "actionrequest=ms";
    $.ajax({url:"SSSutility.php", type:"post", data:postData, success:function(dataset){
        $("#data-area").html(dataset);
    }});
});

This html has additional buttons inside it when I want to target. Because the JS script is loaded with the original HTML page it cannot target this new html without reloading the JS file that contains the script for the inner buttons. What I'm trying to do is find a way to not have to reload the script in the html response. So far I can only find code which targets the AJAX response on the way in and then triggers a method to run. I need to be able to target the new HTML from a separate method so it is tied to the button clicks.

Andrew · Accepted Answer · 2014-06-13 16:46:26Z

1

This will allow you to target dynamically created buttons by applying the event listener to the document:

$(document).on('click', '#btnId', function(){

});

See jQuery .on() documentation: http://api.jquery.com/on/

answered Jun 13, 2014 at 16:46

Andrew

20.4k13 gold badges111 silver badges122 bronze badges

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

Collectives™ on Stack Overflow

jQuery target html from ajax response using a separate function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related