动态加载内容的函数调用答案

【问题标题】：Function Calls for Dynamically Loaded Content动态加载内容的函数调用
【发布时间】：2012-04-12 15:25:26
【问题描述】：

我有一个 PHP 文件，它提供一些从 MySQL 数据库填充的 HTML，并加载到 DOM 中。该数据通过 jQuery load() 方法加载到 HTML 文档的 #navContent 分区中。这按计划运行。

在 HTML 文档的最底部，我有一个针对 #navItem div 的单击函数（请参阅 php 文件的第一个回显行）被动态加载到 DOM 中，但这不会触发。我知道 #navItem 标签 ID 在那里，因为我的 CSS 样式正确。

我有什么问题？现在，我只希望在 #navContent div 中动态创建的所有分割点都可以点击到 URL。

我是新手，刚刚学习 jQuery，所以更正的代码会很有帮助。谢谢

在 HTML 中：

<html>
<head>
    <script type="text/javascript">
    . . .
    var ajaxLoader = '';
    var dns = 'http://www.someURL';
    var navContent = '/folder/my_list.php';
    var bodyContent = '/folder/index.php/somestuff #content';

        $(document).ready(
        function() {
            loadPage(dns + navContent, "navContent");
            loadPage(dns + bodyContent, "bodyContent")
        });
    . . .
    </script>
    . . .
</head>
<body>
    . . .
    <div id="navPanel">

            <div id="navHeader">
                <img src="images/ic_return.png" style="float: left;"/>
                <img  id="listSortBtn" src="images/ic_list_sort.png" style="float: right;"/>
                <h4 id="navHeaderTitle"></h4>
            </div>

            <div id="navScrollContainer" class="navContentPosition">
                <div id="navContent">NAVIGATION CONTENT GETS DUMPED IN HERE</div>
            </div>

        </div>
    . . .
</body>
<!-- ================ Functions ===================================== -->
<!-- **************************************************************** -->

<script type="text/javascript">

    /* --------------- Handle Pg Loading ----------------- */
    function loadPage(url, pageName) {
        $("#" + pageName).load(url, function(response){
            $('#navHeaderTitle').text($(response).attr('title'));
    //          transition("#" + pageName, "fade", false);
        });
    };

    /* ------------- Click Handler for the Nav Items------ */
    $("#navItem").click(function(e) {
        e.preventDefault();
        var url = 'http://www.google.com';
        var pageName = 'navContent';
        loadPage(url, pageName);
    });
    . . .
</script>
</html>

提供的 PHP 文件：

<?php
$con = mysql_connect("localhost","root","pw");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("andaero", $con);
$result = mysql_query("SELECT * FROM some_list");

while($row = mysql_fetch_array($result))
{
echo "<div id='navItem' title='My Nav Title'>";
echo "<h1>" . $row['label'] . "</h1>";
echo "<h2>" . $row['title'] . "</h2>";
echo "<p>" . $row['description'] . "</p>";
echo "</div>";
}
mysql_close($con);
?>

【问题讨论】：

标签： php jquery html dom

【解决方案1】：

您需要在 DOM 附加您的自定义标记之后初始化该单击方法。这是 OOP 编程创造奇迹的完美例子。

您也没有将 click 方法加载到 doc-ready...

<script type="text/javascript">
function MyConstructor()
{
    this.ajaxLoader = '';
    this.dns = 'http://www.someURL';
    this.navContent = '/folder/my_list.php';
    this.bodyContent = '/folder/index.php/somestuff #content';

    this.loadPage = function( url, pageName )
    {
        $("#" + pageName).load(url, function(response){
            $('#navHeaderTitle').text($(response).attr('title'));
        });
        this.toggles();
    }

    this.toggles = function()
    {
            var t = this;
        $("#navItem").click(function(e) {
            e.preventDefault();
            var url = 'http://www.google.com';
            var pageName = 'navContent';
            t.loadPage(url, pageName);
        });
    }

    /**************************************
    *Init Doc-Ready/Doc-Load methods
    **************************************/
    this.initialize = function()
    {
        this.loadPage( this.dns + this.navContent, "navContent");
        this.loadPage( this.dns + this.bodyContent, "bodyContent");
    }
    this.initialize();
}

$( document ).ready( function(){
    var mc = new MyConstructor();

    //now, you can go ahead and re-run any methods from the mc object :)
    //mc.loadPage( arg, 'ye matey' );
});
</script>

【讨论】：

Thnx，我之前尝试过（现在再次尝试以防万一），但仍然没有。还有其他想法吗？？？
我稍后再看一下。你的函数中可能还有另一个我没有真正看过的错误。
再次感谢。我现在把它放在 HTML 文档底部的 function loadPage(url, pageName) {... 中，因为我认为它应该在那里
好吧，就这样吧。根据您的第一段，我将假设这工作正常......所以当您加载页面时， loadPage() 的两个实例运行正常？你有你的内容，我编辑的答案没有在页面准备好后通过 loadPage() 函数呈现的项目上触发事件？抱歉所有问题。
嗯...我会开始使用 console.log() 来确保点击事件中的一切都到位。甚至可能添加一些警报标志来查看程序运行的程度。同时，我会为你构建一个小的 js 构造函数。