与.load（ed）页面的OnClick交互无法正常工作

I'm in the process of loading a view different info panels using jquery's .load() function. However, some of the content in the loaded element which I'd like to interact with (using .on('click')) doesn't seem to be responding accordingly. Can I have click actions on dynamically loaded content? If not, what's the best work around? #updateJSON is an that lives within the viewjson.php file.

$().ready(function() {

$("#viewlatestjson").load("viewjson.php");
$("#viewlivedatafeeds").load("viewfeed.php");

$('#updatejson').on('click', function(e){
    e.preventDefault();
    $("#alertPanel").removeClass( "success warning info alert secondary" );
    $("#alertPanel").addClass( "secondary" );
    $("#alertMessage").html( "<img src=\"icons/alert-loader.gif\"> Updating local JSON conversion, please wait..." );
    $("#alertPanel").fadeIn(300);
    $.ajax({
        url: 'downloadjson.php',
        type: 'post',
        data: {'update': 'yes'},
        success: function(data, status) {
            if(data == "complete") {
                setTimeout(function(){
                    $("#alertPanel").removeClass( "success warning info alert secondary" );
                    $("#alertPanel").addClass( "success" );
                    $("#alertMessage").html( "JSON conversion complete. You now have the latest pull." );
            }, 3000);
        }   
        else if(data == "notime") {
            setTimeout(function(){
                $("#alertPanel").removeClass( "success warning info alert secondary" );
                $("#alertPanel").addClass( "info" );
                $("#alertMessage").html( "Cannot Update: You are only allowed to update every 20 minutes." );
            }, 3000);   
        }
      }
    });
});});

Try passing a function that adds the click handler as a callback to the load function, so you know the element is there before you try and apply a click handler to it.

$("#viewlivedatafeeds").load("viewjson.php",function(){
    $('#updatejson').on('click', function(e){
        e.preventDefault();
        /*
        .
        .
        .
        */
    }
});

Figured it out. I must add the selector parameter, otherwise the event is directly bound instead of delegated, which only works if the element already exists (so it doesn't work for dynamically loaded content).

$(document.body).on('click', '#viewlatestjson' ,function(){})