Вызовы функций для динамически загружаемого контента - PullRequest
Новая
       1

Вызовы функций для динамически загружаемого контента

0 голосов
/ 29 марта 2012

У меня есть файл PHP, который обслуживает некоторый HTML-код, заполненный из базы данных MySQL и загружаемый в DOM.Эти данные загружаются с помощью метода jQuery load () в раздел #navContent документа HTML.Это функционирует как запланировано.

В самом низу документа HTML у меня есть функция щелчка, предназначенная для # navItem div ( см. Первую строку эха в файле php )это было динамически загружено в DOM, но это не срабатывает.Я знаю, что идентификатор тега # navItem существует, потому что мои CSS стили правильно.

Что у меня не так?Сейчас я просто хочу, чтобы все деления, которые были динамически созданы в # navContent , делались щелчком по 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);
?>

1 Ответ

1 голос
/ 29 марта 2012

Вам нужно инициализировать этот метод нажатия ПОСЛЕ ТОГО, КАК DOM был добавлен с вашей пользовательской разметкой.Это прекрасный пример случая, когда программирование ООП могло бы творить чудеса.

Вы также не загрузили метод click в готовый документ ... 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...