У меня есть PHP-файл, который обслуживает некоторый HTML, заполненный из базы данных MySQL, и загружается в DOM. Эти данные загружаются с помощью метода jQuery load () в раздел #navContent документа HTML. Это работает как строгий.
В самой нижней части HTML-документа у меня есть функция щелчка, которая нацелена на div #navItem ( см. Первую эхо-строку файла php ), которая была динамически загружена в DOM, но это не срабатывает. Я знаю, что идентификатор тега #navItem существует, потому что мои CSS стилизуют его правильно.
Что у меня не так? На данный момент я просто хочу, чтобы все деления, которые были динамически созданы в div #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); ?>