函数调用动态加载的内容 [英] Function Calls for Dynamically Loaded Content
问题描述
我有一个PHP文件，它提供从MySQL数据库填充的一些HTML并加载到DOM中。此数据通过jQuery load（）方法加载到HTML文档的#navContent区间。这个功能如计划一样。
I have a PHP file that serves up some HTML populated from a MySQL database and is loaded into the DOM. This data is loaded via jQuery load() method into the #navContent divide of the HTML document. This functions as planed.
在HTML文档的最底部，我有一个针对 #navItem div的点击功能（见第一个动态加载到DOM中的php文件的回声线）但不会触发。我知道 #navItem 标签ID就在那里，因为我的CSS样式正确。
At the very-bottom of the HTML doc, I have a click function that targets the #navItem div (see the first echo line of the php file) that was dynamically loaded into the DOM but this does not fire. I know the #navItem tag ID is there because my CSS styles it correctly.
我有什么问题？现在，我只想要动态创建到 #navContent div中的所有除法点击直到URL。
What do I have wrong? For now, I just want all the divides that were dynamically created into the #navContent div to click thru to a URL.
我是一名新手，只是学习jQuery，所以更正的代码会非常有用。 Thnx
I am a newB and just learning jQuery so corrected code would be very helpful. 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);
?>
推荐答案
您需要在DOM拥有后初始化该点击方法附加了自定义标记。这是OOP编程可以创造奇迹的一个完美示例。
You need to initialize that click method AFTER the DOM has been appended with your custom markup. This is a perfect example of a case where OOP programming would do wonders.
您也没有将click方法加载到doc-ready ...
You also didn't load the click method into the 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>
这篇关于函数调用动态加载的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
