jQuery 教程：绑定未来事件 - 开发者新闻 - XOOPS 新闻

开发者新闻：jQuery 教程：绑定未来事件

发布者：kaotik 在 2010/4/1 13:30:00 阅读量：12780

本教程将为您介绍$.live()的好处以及如何通过ajax传递smarty模板。

什么是未来绑定？
这是一个相对较新的问题，随着ajax调用的出现而出现。理解它的最佳方式是结合实际案例。

从简单入手。
下载我的教程模块（tutorial17.zip）并安装它。

现在转到主页并点击教程。
您现在将看到单词："点击这里"。当您点击时，会弹出一个包含"Hello world"的警告窗口。这是我在前一个教程中解释过的非常简单的jQuery代码。

现在让我们加入一些ajax。
在教程文件夹中创建一个名为process.php的文件，并将以下内容放入该文件："这是通过ajax传递的"。
现在转到tutorial/templates/tut_main.html，并替换所有代码如下

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">script> 
 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     
    $('#clickme').click(function() { 
      $('#ajxDiv').load('<{$xoops_url}>/modules/tutorial/process.php'); 
    }); 
   }); //END READY 
    script> 
     
    <div id="clickme"> 
    <a href="#">点击这里a> 
    div> 
    <br /><br /> 
     
    <div id="ajxDiv" class="item"> 
    &nbsp; 
    div>

现在尝试一下。如你所见，这是一个简单的AJAX调用。
注意：为了使AJAX正确运行，请关闭xoops调试或将其设置为弹出窗口。

传递smarty模板
让我们进一步操作，不仅通过AJAX传递一些文本，而是传递一个smarty模板。

打开process.php文件，并将所有内容替换为以下内容

 require('../../mainfile.php'); 
 
//检查xoopsTpl是否已创建。如果没有，则创建一个新的实例。 
require_once XOOPS_ROOT_PATH . '/class/template.php'; 
if (!isset($xoopsTpl)) { 
$xoopsTpl = new XoopsTpl(); 
} 
 
//从数据库中获取模板并将其分配给一个变量。 
$tst = $xoopsTpl->fetch('db:list.html'); 
 
echo $tst 
?>

打开文件tutorial/templates/list.html，并将所有内容替换为以下内容

测试模块。现在您已通过AJAX调用传递了一个SMARTY模板。

绑定AJAX模板
现在我们来尝试将一个点击函数绑定到已加载的模板中。
打开 tutorial/templates/tut_main.html 并将所有代码替换为以下内容

预期的结果是，当您点击列表中的项目时，应该弹出一个警告窗口......试一试。
无反应。

这是因为DOM已经构建完成，所有JavaScript都已经执行。使用ajax，你需要在所有内容组装之后传入html。从实际应用的角度来看，这意味着你不能使用常规方法绑定未来的事件（例如模板中的链接）。
幸好，jQuery团队非常富有创意，并为此提供了一种处理方法。

$.live()
打开文件tutorial/templates/tut_main.html，并将所有代码替换为以下内容

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">script> 
 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     
    $('#clickme').click(function() { 
      $('#ajxDiv').load('<{$xoops_url}>/modules/tutorial/process.php'); 
    }); 
     
    $('#myList').live('click', function() { 
    alert("hello world"); 
    }); 
     
   }); //END READY 
    script> 
     
    <div id="clickme"> 
    <a href="#">Click herea>
    </div> 
    <
     <div id="ajxDiv" class="item"><
    &两口； 
     </div><
    </body>