Question

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

我正在开发一个应用程序，我正在处理 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>

但是，对于“是”和“否”，我不再获得相同的圆形按钮。（并且在页面底部调用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并显示带有curveycorner的按钮，但是当加载第二个面板时，它不会获得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知识），请尝试以下代码，看看“弯曲的角落”是如何工作的（请从http://www.curvycorners.net/或其他任何地方下载“curvycorners.js”。然后尝试我的代码，它小而简单--------------------------------------- -----------------------------------------

<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>

Answer 1

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

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

添加说明

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

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

$(selector).corner();

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

Answer 2

如果没有看到jquery文件，这很难解剖，但我猜你没有在页面首次加载时没有使用代理。点击这里：

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

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

2 个答案: