У меня есть файл PHP, который обслуживает массив JSON, заполненный из базы данных MySQL и загружаемый в DOM.Эти данные загружаются с помощью метода jQuery getJSON () в раздел #navContent документа HTML.Это работает по плану.
В самом низу документа HTML у меня есть функция щелчка, которая нацелена на div #navItem, который был динамически загружен в DOM, но он не срабатывает.Я предполагаю, что <li ID = 'navItem'... не сохраняется при динамическом заполнении данных .. ??
Что я имею в виду?На данный момент я просто хочу, чтобы все деления, которые были динамически созданы в div #navContent, переходили по URL-адресу.
<html>
. . .
<head>
. . .
<script type="text/javascript">
var ajaxLoader = '';
var container = "navItem";
var appendE = "navContent";
var dns = 'http://192.168.1.34';
var navContent = '/andaero/php/regulatory_list.php';
var bodyContent = '/wiki/index.php/Airworthiness_Directive #content';
<!-- ================ When Ready Do This ============================ -->
<!-- **************************************************************** -->
$(document).ready(function(){
loadNav(dns + navContent, container, appendE);//<- This gets loaded into the navContent<div
loadPage(dns + bodyContent, "bodyContent");
});
. . .
</script>
<body>
. . .
<div id="navScrollContainer" class="navContentPosition">
<div id="navContent" >
<li id="navItem" style="display: none;">
<h1 class="navH1"></h1>
<h2 class="navH2"></h2>
<p class="navP"></p>
<hr class="navHR" />
</li>
</div>
</div>
. . .
</body>
<!-- ================ Functions ===================================== -->
<!-- **************************************************************** -->
<script type="text/javascript">
/* --------------- Handle Pg Loading ----------------- */
function loadPage(url, pageName) {
$("#" + pageName).load(url, function(response){
// transition("#" + pageName, "fade", false);
});
};
function loadNav(url, container, appendE) {
$.getJSON(url, function(data){
$.each(data.items, function(){
var newItem = $('#' + container).clone();
// Now fill in the fields with the data
newItem.find("h1").text(this.label);
newItem.find("h2").text(this.title);
newItem.find("p").text(this.description);
// And add the new list item to the page
newItem.children().appendTo('#' + appendE)
});
$('#navHeaderTitle').text(data.key);
//transition("#" + pageName, "show");
});
$('#navItem').click(function(e){ //<-- THIS IS BROKE!! HELP!!
e.preventDefault();
$('#bodyContent').load('www.google.com');
});
};
</scrip>
</html>
============ РЕДАКТИРОВАТЬ================
Я перепробовал все, что было предложено без преобладания.Я закончил тем, что использовал код, на который Shyju ответил, но с одной модификацией, чтобы заставить его работать: согласно документам,
.on (events [, селектор] [, данные], обработчик (eventObject))Я изменил [, data] с идентификатора тега на тип тега.то есть: a .Эта функция теперь, так как я обернул все
с тегом.См. Ниже:
Изменен HTML-код на:
<div id="navScrollContainer" class="navContentPosition">
<div id="navContent" >
<li id="navItem" style="display: none;">
<a> //<-- ADDED THIS TAG WRAPPER!!
<h1 class="navH1"></h1>
<h2 class="navH2"></h2>
<p class="navP"></p>
<hr class="navHR" />
</a>
</li>
</div>
</div
Изменен параметр на (Обратите внимание, что .on () разрешает событие щелчка по любому элементу TAG - даже новым --потому что событие обрабатывается вездесущим предыдущим элементом после того, как оно всплывет там .:
$('#navContent').on('click', 'a', function(e){//<--CHANGED DATA TO 'a'
e.preventDefault();
$('#bodyContent').load('http://www.google.com');
});