Question

我有一个页面（index.php），其中包含一个动态加载内容的div：

<div id='#container'></div>

在这个div中，我使用以下内容动态加载外部页面：

$(this).on('click', '.subNav', function () {
    var subSectionId = this.id;
    $("#content").load( 'pages/content.php?id=' + subSectionId );
});

我遇到的问题是：在页面content.php上有一个按钮（类.tblSort），点击后需要在div＆＃39; #content＆＃39;中重新加载content.php。我有以下JQuery代码：

$(this).on('click', '.tblSort', function () { 
    var subSectionPageId = $("#subSectionId").val();
    var orderBy = this.id;
    $("#content").load( '/pos2/pages/content.php?id=' + subSectionId + '&orderBy=' + orderBy );
});

它不起作用，我认为这是因为div＆＃39;＃content＆＃39;在文件index.php中，按钮（类.tblSort）在文件content.php中。这是怎么回事？

Answer 1

尝试在ajax完成事件中包装您的按钮单击事件。

我想你正在准备一份文件中的click事件，而且发生的事情是jquery最初找不到你指向它的元素。

尝试这样的事情..

//When all dom elements are ready on a page (images wont be loaded at this point)
$(document).ready(function(){

    //On click of the container, load the content from external source
    //Probably not clicking the container so change selector
    $("#container").on('click', function(){
        $("#content").load('pages/content.php?id=' + this.id);
    });

});

//.load() is an ajax call just wrapped up friendly, so attach an ajax complete event.
$(document).ajaxComplete(function(){

    //On the tblSort button click (dynamically loaded in #content above)
    $("#content .tblSort").on('click', function(){
        $("#content").load('/pos2/pages/content.php?id=' + $("#subSectionId").val());
    });

});

试一试。没有经过测试，所以不能确定它对你有用，但我不明白为什么不这样做。

<强>更新

由于OP的评论而更新答案。注意#container已更改为#button @OP：更新此选择器以满足您的需求并按描述提取ID。

//When all dom elements are ready on a page (images wont be loaded at this point)
$(document).ready(function(){

    //On click of the container, load the content from external source
    //Probably not clicking the container so change selector
    $("#button").on('click', function(){
        $("#content").load('pages/content.php?id=' + $(this).attr('id'));
    });

});

//.load() is an ajax call just wrapped up friendly, so attach an ajax complete event.
$(document).ajaxComplete(function(){

    //On the tblSort button click (dynamically loaded in #content above)
    $("#content .tblSort").on('click', function(){
        $("#content").load('/pos2/pages/content.php?id=' + $("#subSectionId").val());
    });

});

Answer 2

除此之外，您可以使用body或父div元素，它不会在运行时更改。

$('body').on('click', '.tblSort', function () { 
    var subSectionPageId = $("#subSectionId").val();
    $("#content").load( '/pos2/pages/content.php?id=' + subSectionId );
});

Answer 3

试试这个会起作用，

$(document).ajaxComplete(function(){
        //On the tblSort button click (dynamically loaded in #content above)
        $("#content").on('click','.tblSort', function(){
            $("#content").load('/pos2/pages/content.php?id=' + $(this).parent().val());
        });

    });

OR

$(document).ajaxComplete(function(){
    //On the tblSort button click (dynamically loaded in #content above)
    $("#content").on('click','.tblSort', function(){
        $("#content").load('/pos2/pages/content.php?id=' + $(this).parent().find("#subSectionId").val());
    });

});

如果您无法运行，请分享您的确切代码并解释

使用JQuery加载到div中 - Div包含外部

3 个答案: