Question

我正在使用jquery＆＃39; s .load（）函数加载视图不同的信息面板。但是，我要加载的元素中的一些内容（使用.on（＆＃39;点击＆＃39;））似乎没有相应的响应。我可以对动态加载的内容执行单击操作吗？如果没有，最好的解决方法是什么？ #updateJSON位于viewjson.php文件中。

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

Answer 1

尝试传递一个函数，将单击处理程序作为回调添加到load函数，因此在尝试对其应用单击处理程序之前，您知道该元素存在。

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

Answer 2

想出来。我必须添加选择器参数，否则直接绑定事件而不是委托，这只有在元素已经存在时才有效（因此它不适用于动态加载的内容）。

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

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

2 个答案: