使用 JQuery 加载到 div - div 包含外部答案

【问题标题】：Load into div with JQuery - Div contains external使用 JQuery 加载到 div - div 包含外部
【发布时间】：2015-07-31 15:00:22
【问题描述】：

我有一个页面（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 '#content' 中重新加载 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 '#content' 在文件 index.php 中，而按钮（类 .tblSort）在文件 content.php 中。有什么办法解决这个问题？

【问题讨论】：

$(this).on...? this 是什么？您没有指定要单击的内容。
如果按钮在 content.php 中，您需要再次将事件监听器附加到它。除非“this”是代表..
@Jay Blanchard 该代码有效。它由“.subNav”类指定，即。当页面上带有 .subNav 类的任何按钮的 id 被传递给函数时。
.subNav 是一个类。你能告诉我们你的按钮代码吗？你能告诉我们剩下的功能吗？
按钮名称"

标签： php jquery

【解决方案1】：

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

我想你正在准备好的文档中定义点击事件，而发生的事情是 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 的 cmets 正在更新答案。注意#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());
    });

});

【讨论】：

问题是我们现在甚至不知道 OP 在问什么。

【解决方案2】：

在这里，您可以使用 body 或在运行时不会更改的父 div 元素。

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

【讨论】：

但是使用这段代码我不会将按钮的 id 传递给函数吗？我发布的代码实际上是简化的。我需要获取单击的按钮的 ID。我已经编辑了帖子。
alert($(this).attr('id'));在点击事件中尝试一下，看看你是否得到了正确的id，如果是的话，只需添加它并传递它

【解决方案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());
        });

    });

或

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

});

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

【讨论】：