如何避免在动态加载DOM内容时多次调用相同的javascript文件

How to avoid calling same javascript files multiple times when DOM content is loaded on the fly?

本文关键字：调用 文件 javascript 动态 何避免 加载 DOM      更新时间：2023-09-26

我知道已经发布了多篇关于类似主题的帖子，但我还没有找到一个好的答案。所以，请上师帮我。

我正在开发一个应用程序，其中我正在开发JavaScript和JSF。在页面加载时，我调用了多个外部javascript/jquery文件（用于多种目的），它们似乎工作得很好。然而，在一些页面中，我有一些组件（JSF组件）最初没有加载，或者没有成为初始DOM的一部分（当页面加载时）。然而，当它在页面上的某个点击事件之后加载时（所以我说内容是动态加载的），那么新内容就不会得到javaScript/jquery的效果。

这里有一个简单的例子，只是为了让我的问题更简单：

我在页眉上有这个：

。。这个在身体上

<div class="panel">
   <p>some sample text</p>
   <p class="button"><a href="javascript:fucntion">Modify</a></p>
</div>

（在上面的代码输出中，我得到了用于"修改"文本的圆形按钮）

当有人点击修改按钮（链接）时，会得到以下代码：

<div class="panel">
   <p>Do You want to modify</p>
   <p class="button"><a href="javascript:fucntion">Yes</a></p>   
   <p class="button"><a href="javascript:fucntion">No</a></p>
</div>

然而，我不再得到相同的圆形按钮"是"answers"否"。（在页面底部调用JQuery文件也没有帮助）。

通过JSF，我们正在使用：

<h:panelGroup render=.....>
   <div class="panel">
      <p>some sample text</p>
      <p class="button"><a href="javascript:fucntion">Modify</a></p>
   </div>
</h:panelGroup>
<h:panelGroup render=.....>
   <div class="panel">
     <p>Do You want to modify</p>
     <p class="button"><a href="javascript:fucntion">Yes</a></p>   
     <p class="button"><a href="javascript:fucntion">No</a></p>
   </div>
</h:panelGroup>

因此，当加载第一个panelGroup（JSF）时，它会获取标头上的内容并加载javaScript，并显示带有弯角的按钮，但当加载第二个面板时，它不会获取javaScript。

我有一个解决方案如下：

<h:panelGroup render=.....>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.curvycorners.min.js"></script>
   <div class="panel">
     <p>Do You want to modify</p>
     <p class="button"><a href="javascript:fucntion">Yes</a></p>   
     <p class="button"><a href="javascript:fucntion">No</a></p>
   </div>
</h:panelGroup>

它是有效的，但检查是否有更好的选项，因为我们希望避免多次调用同一个javaScript文件。

在收到其他人的评论后添加了以下内容-事实上我错了。Curvy corner插件是一个独立的插件，除了"curvycorners.js"之外，不需要任何其他javascript/jquery文件。为了防止你们对它（或我的javascript知识）有疑问，只需尝试以下代码，看看"Curvy corner"是如何工作的（请从http://www.curvycorners.net/或其他任何地方。。然后试试我的代码，它又小又简单----------------------------------------------------------------------------

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>curvyCorners - Tab demo</title>
<style type="text/css">
body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;}
/* styles for the demo sub-pages */
#demo-btn {margin: 0.5in auto;border: 0px solid #fff;color: #fff; padding:5px 15px; text-align: center; background-color: #006354; 
border: 1px solid #ccc;  background-image: url(btn_middle_brnd.png);  background-repeat: repeat-x; border-radius:10px; -webkit-border-radius: 10px;
  -moz-border-radius: 10px; height:15px; width:80px; font-size:11px; font-weight:bold;}
#demo-btn a{color:#fff; text-decoration:none;}  
</style>
<script type="text/javascript" src="../curvycorners.src.js"> </script>
</head>
<body>
    <div id="demo-btn">
        <span><a href="javascript:function();">Cancel</a></span>
    </div>
</body>
</html>

我会使用load或ajax方法的完整事件将curveycorners插件应用于没有但需要它的元素。

$(el).load("url",function(){
  $(el).find('selector').corner();
});

添加说明：

你没有给我们任何JavaScript，所以我们所能做的就是假设。

corner插件需要一段特定的代码才能将其应用于元素。

$(selector).corner();

为了将其应用于元素，该元素必须在运行该代码时存在于页面上。由于您使用ajax加载元素，因此每次运行ajax调用时都需要再次运行该代码，以便将其应用于新元素。

如果不看到jquery文件，很难对其进行剖析，但我猜您并没有对页面首次加载时未加载的组件使用委托。点击此处查看：

http://api.jquery.com/delegate/

相关文章：