1

タグ内のjqueryスクリプトファイルにリンクしたjspがあります。このページには、リンクがクリックされたときに別の jsp ファイルからロードする必要があるタグがあります。新しいページにも特定の jquery 操作があります。しかし、ページをロードするとjquery操作が実行されないため、新しい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 ページです。ここでは、動的に変更する必要があるヘッダー部分とタグのみを示しています。ページはアップロードするには非常に大きいので、これで十分だと思います。

そして、私が持っている2番目の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ファイルには、次のようなコードがあります

$('.tab').click(function(){
      $('.tabmenu').children().removeClass('active');
      $(this).parent('li').addClass("active");
      var tabIndex=$(this).parent('li').index();
      alert(typeof jQuery);
      changeTabHtml("tabMenuAction_forms.action", "tabNo="+tabIndex, '.page_steps');
      changeTabHtml("tabMenuAction_steps.action", "tabNo="+tabIndex, '.orderprocess_steps');
      changeTabHtml("tabMenuAction_headerCaption.action", "tabNo="+tabIndex, ".headercaption");
  });

function changeTabHtml(urlLink, data, divClass){
      $.ajax({
          type: "POST",
          url: urlLink,
          data: data,
          cache: false,
          success: function(msg){
              $(divClass).html(msg);
          }
        });
}

ここまではすべて正常に動作しています..... 2 番目のページが動的に読み込まれ、すべてが機能しています。しかし、ロードされると、「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;

ロード後、この関数は機能しません。したがって、2番目のページにもjqueryファイルをロードしようとしましたが、正常に動作しましたが、ファイルが2回、次に4回、次に8回ロードされるため、サーバーに複数回ヒットし始め、最終的にアプリケーションが遅くなります下。とにかく、ファイルのロードを防ぐ方法はありますか、または2番目のjspでjqueryファイルをロードしないと「btn_continue」が機能しない理由はありますか...?????

4

1 に答える 1

2

DOMに動的に要素を追加しているため、.delegate()メソッドを使用して要素にアクセスする必要があります。

それ以外の

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

これを使って

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

jquery 1.7以降では、.on()代わりにを使用する必要があります.delegate()

、、メソッドの基本的な利点はlive()、後でAJAX、JavaScriptのcreateElementメソッドなどを介してその要素を追加するまで、まだ存在していない要素に対して、、、などのイベントを実行できることです。delegate()on()hoverclick

注：live非推奨です。代わりにdelegate、1.7.x以外のjQueryバージョンに使用する必要があります。詳細はこちら

また、基本的に元のページにリモートコンテンツを入力する場合は、2番目のjspに追加された余分なJavaScriptを削除します。

編集：：：

.onの動作方法を変更していないためです。「ライブ」から「オン」に変更することはできません。APIは.on()

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

それはこのように動作します：：

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

使用する前に、ここにあるさまざまなAPIの関連ドキュメントを常に参照する必要があります。

于 2012-06-11T17:50:53.620 に答える