Question

我有一个PHP文件，它提供从MySQL数据库填充的一些HTML并加载到DOM中。此数据通过jQuery load（）方法加载到HTML文档的#navContent区间。这个计划就像计划一样。

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

我有什么不对？现在，我只想要动态创建到 #navContent div中的所有除法点击直到URL。

我是一名新手，只是学习jQuery，所以纠正的代码会非常有用。日Thnx

在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);
?>

Answer 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>

函数调用动态加载的内容

1 个答案: