2012-06-11 53 views
1

我有一个jsp链接到标记中的jquery脚本文件。在这个页面中,我有一个标签,当链接被点击时,它必须从另一个jsp文件中加载。新页面也有一定的jquery操作。但是当我加载页面的jQuery操作不执行,因此我也加载jsp文件在新的jsp文件中。然后再次出现问题,即操作不止一次。请给出您宝贵的答复,建议和解决方案的问题...如何防止多次加载jquery文件?

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
<title>Flyers</title> 

<link href="css/style.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="js/lib.js"></script> 
<script type="text/javascript" src="js/scripts.js"></script> 
<script type="text/javascript" src="js/jquery.json-2.3.min.js"></script> 
</head> 


    <div class="page_steps"> 
      <s:form method="post" action="flyers" name='ldm_form' id='ldm_form_flyers'> 


       <!-- Question 1 --> 
       <div class="questionstep"> 
        <div class="stepno">STEP 1</div> 
        <h2>Enter the correct DEC:</h2> 
        <input type="text" id="dec" name="oci.dec" value="" class="inputbx numericonly" maxlength="16" /> 

        <div class="errbox">Please enter valid DEC</div> 
        <input type="button" value="" class="btn_continue" /> 
       </div> 

       <!-- Question 2--> 
       <div class="questionstep"> 
        <div class="stepno">STEP 2</div> 
        <h2>Select Your target program</h2> 
        <div class="errbox">Please select at lease one</div> 
        <s:iterator value="targetPrograms"> 
        <input type="radio" name="tpId" value="<s:property value="tpId"/>"/><label id="<s:property value="tpId"/>"><s:property value="tpName"/></label><br/> 
        </s:iterator> 
        <input type="button" value="" class="btn_continue" /> 
       </div> 


       <!-- Question 3 --> 
       <div class="questionstep"> 
        <div class="stepno">STEP 3</div> 
        <h2>Select Your Mailing Materials</h2> 
        <div class="errbox">Please select at lease one</div> 

        <strong>Self Mailer</strong><br /> 
        <div class="mailmaterials"> 
         <ul class="questslider"> 
          <s:iterator value="mailingmaterials" id="mailMat" begin="0" end="1"> 
           <li> 
           <div class="quickpreview"><p>QUICK PREVIEW</p><div class="noshow"> 
            <s:iterator value="#mailMat.templatePath" id="tempPath" begin="0" end="1"> 
             <s:property value="#tempPath.ldmImgPath"/><s:property value="#tempPath.ldmImgName"/>, 
            </s:iterator> 
            </div></div> 
           <s:iterator value="#mailMat.templatePath" id="tempPath" begin="2"> 
           <img src="<s:property value="#tempPath.ldmImgPath"/><s:property value="#tempPath.ldmImgName"/>" width="90" height="149" alt="" /> 
           </s:iterator> 
           <br /> 
           <label> 
           <input type="radio" name="mailMatId" value="<s:property value="#mailMat.mailMatId"/>"/><s:property value="#mailMat.mailMatName"/></label> 
           </li> 
          </s:iterator> 

         </ul> 
        </div> 

这一个是我的主要的jsp页面,在这里我只显示标题部分和标记,必须动态地变化页面非常大,无法上传,我认为这么多就足够了,

,并在第二jsp页面中我有

<s:set name="tabNo" value="tabNo"/> 
       <s:if test="%{#tabNo==0}"> 
        <s:form method="post" action="flyers" name='ldm_form' id='ldm_form_flyers'> 
         <!-- Question 1 --> 
         <div class="questionstep"> 
          <div class="stepno">STEP 1</div> 
          <h2>Enter the correct DEC:</h2> 
          <input type="text" id="dec" name="oci.dec" value="" class="inputbx numericonly" maxlength="16" /> 

          <div class="errbox">Please enter valid DEC</div> 
          <input type="button" value="" class="btn_continue" /> 
         </div> 
         <!-- Question 2--> 
         <div class="questionstep"> 
          <div class="stepno">STEP 2</div> 
          <h2>Select Your target program</h2> 
          <div class="errbox">Please select at lease one</div> 
          <s:iterator value="ordCaptAct.targetPrograms"> 
          <input type="radio" name="tpId" value="<s:property value="tpId"/>"/><label id="<s:property value="tpId"/>"><s:property value="tpName"/></label><br/> 
          </s:iterator> 
          <input type="button" value="" class="btn_continue" /> 
         </div> 
         <!-- Question 3 --> 
         <div class="questionstep"> 
          <div class="stepno">STEP 3</div> 
          <h2>Select Your Mailing Materials</h2> 
          <div class="errbox">Please select at lease one</div> 

          <strong>Self Mailer</strong><br /> 
          <div class="mailmaterials"> 
           <ul class="questslider"> 
            <s:iterator value="ordCaptAct.mailingmaterials" id="mailMat" begin="0" end="1"> 
             <li> 
             <div class="quickpreview"><p>QUICK PREVIEW</p><div class="noshow"> 
              <s:iterator value="#mailMat.templatePath" id="tempPath" begin="0" end="1"> 
               <s:property value="#tempPath.ldmImgPath"/><s:property value="#tempPath.ldmImgName"/>, 
              </s:iterator> 
              </div></div> 
             <s:iterator value="#mailMat.templatePath" id="tempPath" begin="2"> 
             <img src="<s:property value="#tempPath.ldmImgPath"/><s:property value="#tempPath.ldmImgName"/>" width="90" height="149" alt="" /> 
             </s:iterator> 
             <br /> 
             <label> 
             <input type="radio" name="mailMatId" value="<s:property value="#mailMat.mailMatId"/>"/><s:property value="#mailMat.mailMatName"/></label> 
             </li> 
            </s:iterator> 

           </ul> 
          </div> 

而在jQuery的文件,我有这样的

代码

直到这里一切工作正常.....第二页动态加载一切工作。但是,当它加载的,“btn_continue”必须调用一些jQuery函数像下面

$('#ldm_form_flyers .btn_continue').click(function(){ 
    var getid = $('.btn_continue').index($(this)); 
    switch(getid){ 
     case 0: 
      var getval = $.trim($("input[name='oci.dec']").val()); 
      if(getval=='' || getval.length!=16 || getval.match(/[^\d]/)){ 
       $("input[name='oci.dec']").addClass('err'); 
       $('.questionstep:eq('+getid+') .errbox').slideDown(); 
      } 
      else{ 
       $.getJSON("btn_continueAction?btn_continueId="+getid+"&oci.dec="+getval, function(data){ 
        var isNext=data.savedInSession; 
       $('.stepsanswer').eq(getid).find('span').html(getval); 
       $("input[name='oci.dec']").removeClass('err'); 
       $('.decanswer').html(getval); 
       if(isNext==true) 
        nextquestion(getid); 
       else 
        $('.questionstep:eq('+getid+') .errbox').slideDown(); 
       }); 
      } 
      break; 

现在正在加载这一功能后无法正常工作。因此,我试图加载第二页中的jquery文件,然后它的工作正常,但它不止一次地启动了服务器,因为该文件被加载了两次,然后是4次,然后是8次,并最终增加了我的应用程序的速度。下。所以是否有阻止加载的文件,或任何解决方案,为什么“btn_continue”不工作,没有加载第二个jsp中的jquery文件... ?????

+0

你有两个jsp页面,脚本标签包含在每个页面中? – Adil

+0

我认为在这里可以看到叙述中描述的确切代码。 –

+0

您是否尝试过使用modernizr?这是一个非常有用的js库,用于这种工作http://modernizr.com/ – TheodoreV

回答

2

由于您要在DOM中动态添加元素,因此您应该使用.delegate()方法访问它们。

而不是

$('#ldm_form_flyers .btn_continue').click(function(){ 

使用此

$('#ldm_form_flyers .btn_continue').delegate("click", function() { 

在jQuery 1.7,你应该使用的.on()代替.delegate()

的基本优势的live()delegate()on()方法是你可以用它们做一个事件:hoverclick,等等,直到您以后添加元素通过AJAX,JavaScript的的createElement方法等尚不存在的元素

注意live已被弃用,取而代之delegate应该用于其他版本的jQuery比1.7.x.阅读更多here

,当你基本上填充原始页面中的远程内容时,删除第二个jsp中额外添加的javascript。

编辑:::

它,因为你还没有改变的方式。对作品。你只是不能从“活”变为“开”。该API是.on()

$(document).on('click', '#ldm_form_flyers .btn_continue', function(){ 
    //your code 
}); 

不同它的工作原理是这样::

$(document).on(events, selector, data, handler); 

你总是应该在使用前咨询不同的API here的相关文件。

+0

感谢您的解决方案。 live()对我来说工作正常,但on()对我来说工作不正常。我搜索了一下,发现了一个解决方案。我试过像$('#ldm_form_flyers')。on(“click”,'。btn_continue',function(){但仍然不起作用 – Pranjut

+0

您正在使用哪个Jquery版本?它支持1.7+ –

+0

我是使用jquery-1.7.1.min.js – Pranjut