백본/핸들/부트 스트랩 설정에서 버튼 클릭 이벤트 처리

Question

나는 위에서 언급 한 세 가지 프레임 워크를 사용하는 프로젝트를 상속했습니다. 내 템플릿 스 니펫은 다음과 같습니다.

<div class="content-header"> 
    <div class="content-header-title">move money to</div> 
    <div class="content-header-controls"> 
     <dl> 
      <dd> 
       <a id="aMoveMoneyCancel">back</a> 
      </dd> 
     </dl> 
    </div> 
</div> 

<div class="content-edge"> 
    <ul class="triangle-breadcrumb margin-bottom"> 
     <li class="active"><a>DETAILS</a></li> 
     <li><a>REVIEW</a></li> 
     <li><a>DONE</a></li> 
    </ul> 


    <div class="content-section"> 
     <div class="content-section-header"> 
      <div class="section-title"> 
       move money to... 
      </div> 
     </div> 


     <div class="content-section-body padding"> 

      <form id="moveMoneyToForm"> 

       <input type="hidden" name="moveMoneyToPayeeDocument.FromAccount" 
       value="{{moveMoneyToPayeeDocument.FromAccount}}" class="required"/> 

       <div class="accounts"> 
        <div class="planted-stop"> </div> 
        <div class="sub-section major from-account"> 
         <div class="sub-section-account-header">from account</div> 
         <div class="sub-section-account-body"> 

          <div id="fromCarouselContainer" class="from-account"> 
           <!--carousel slide generated dynamically--> 
           <!--moveMoneyTo.accountsCarousel.template--> 
          </div> 

         </div> 
        </div> 

        <!--<input type="hidden" name="moveMoneyToPayeeDocument.ToAccount" value="{{moveMoneyToPayeeDocument.ToAccount}}" />--> 
        <div id="toAccountContainer" class="to-account"> 

         {{#if isIrdPayment}} 
         {{> app_templates_irdPayment.carouselDetail.template}} 
         {{else}} 
         {{> app_templates_moveMoneyTo.toAccount.template}} 
         {{/if}} 

        </div> 
        <div class="planted-stop"> </div> 
        <span class="stretch"></span> 
       </div> 

       <div class="sub-sections-container"> 
        <div class="sub-sections-shield"></div> 

        {{#if isIrdPayment}} 
        {{> app_templates_irdPayment.amountDescription.template}} 
        {{else}} 
        {{#with moveMoneyToPayeeDocument}} 
        <div class="sub-section major"> 
         <div class="sub-section-header">AMOUNT</div> 
         <div class="sub-section-body"> 

          <input id="amount" name="moveMoneyToPayeeDocument.Amount" 
          type="text" step="0.01" 
          placeholder="Amount" value="{{unformatCurrency Amount}}" 
          class="required number amount-input"/> 

         </div> 
        </div> 

        <div class="sub-section major"> 
         <div class="sub-section-header">Description</div> 
         <div class="sub-section-body" id="divDescriptionContainer"> 
          {{> app_templates_moveMoneyTo.description.template}} 
         </div> 
        </div> 

        {{/with}} 
        {{/if}} 


        {{#with moveMoneyToPayeeDocument}} 
        <div class="sub-section major"> 
         <div class="scheduling"> 
          <div class="sub-section-header">SCHEDULING</div> 
          <div class="sub-section-body"> 
           <div class="transfer-date"> 

            <div id="divTransferDate" 
            class="input-section move-money-to-recurring-section {{#if isRecurring}} collapse {{else}} in collapse {{/if}}" 
            {{#unless isRecurring}} style="height: auto;" {{/unless}}> 
            <div> 
             <label for="date">Transfer date</label> 
             <input id="date" class="date-input" type="text" placeholder="Date" 
             min="{{today this}}" 
             data-date-min="{{today this}}" 
             value="{{formatDate TransferDate 'input'}}"/> 
            </div> 
           </div> 


           <div class="input-section last"> 
            <div> 
             <label class="checkbox"> 
              <input id="recurringTransaction" type="checkbox" 
              data-target=".move-money-to-recurring-section" data-toggle="collapse" 
              {{#if isRecurring}} checked="checked" {{/if}} 
              > Recurring transaction 
             </label> 
            </div> 
           </div> 

           <div id="divSchedulingDetails" class="move-money-to-recurring-section {{#if isRecurring}} in collapse {{else}} collapse {{/if}} "> 
            {{#with ScheduleDetails}} 
            <div id="recurringSection"> 
             {{> app_templates_moveMoneyTo.scheduling.template }} 
            </div> 
            {{/with}} 
           </div> 


          </div> 
         </div> 

        </div> 

        <div class="buttons-container"> 
         <button id="next" class="btn btn-item btn-primary" disabled="disabled">NEXT</button> 
         <button id="cancel" class="btn btn-item btn-dark">BACK</button> 
        </div> 

        {{/with}} 
       </div> 
      </form> 
     </div> 
    </div> 
</div> 

크롬에서는이 기능이 제대로 작동하지 않으며 Chrome에서만 작동합니다. 어떤 이유로 인해 탐색 한 URL에 중간에 삽입 된 수많은 쿼리 매개 변수가있었습니다. 렌더링에 사용 된 뷰로 이동했기 때문에 라우팅이 채워 졌다고 가정합니다. 그런 다음 다시 돌아와이 양식을 다시 렌더링했습니다. 이것은 Chrome에만 있으며 FF 나 IE9에서는 재생할 수 없었습니다 (다른 버전을 사용해 보지 않았습니다).

개정의 역사를 통해 다시 사라 데 내가 같이하는 데 사용이 양식을 발견 :

<div class="content-header"> 
    <div class="content-header-title">move money to</div> 
    <div class="content-header-controls"> 
     <dl> 
      <dd> 
       <a id="aMoveMoneyCancel">back</a> 
      </dd> 
     </dl> 
    </div> 
</div> 

<div class="content-edge"> 
    <ul class="triangle-breadcrumb margin-bottom"> 
     <li class="active"><a>DETAILS</a></li> 
     <li><a>REVIEW</a></li> 
     <li><a>DONE</a></li> 
    </ul> 


    <div class="content-section"> 
     <div class="content-section-header"> 
      <div class="section-title"> 
       move money to... 
      </div> 
     </div> 


     <div class="content-section-body padding"> 

      <form id="moveMoneyToForm"> 

       <input type="hidden" name="moveMoneyToPayeeDocument.FromAccount" 
         value="{{moveMoneyToPayeeDocument.FromAccount}}" class="required"/> 

       <div class="accounts"> 
        <div class="planted-stop"> </div> 
        <div class="sub-section major from-account"> 
         <div class="sub-section-account-header">from account</div> 
         <div class="sub-section-account-body"> 

          <div id="fromCarouselContainer" class="from-account"> 
           <!--carousel slide generated dynamically--> 
           <!--moveMoneyTo.accountsCarousel.template--> 
          </div> 

         </div> 
        </div> 

        <!--<input type="hidden" name="moveMoneyToPayeeDocument.ToAccount" value="{{moveMoneyToPayeeDocument.ToAccount}}" />--> 
        <div id="toAccountContainer" class="to-account"> 

         {{#if isIrdPayment}} 
         {{> app_templates_irdPayment.carouselDetail.template}} 
         {{else}} 
         {{> app_templates_moveMoneyTo.toAccount.template}} 
         {{/if}} 

        </div> 
        <div class="planted-stop"> </div> 
        <span class="stretch"></span> 
       </div> 

       <div class="sub-sections-container"> 
        <div class="sub-sections-shield"></div> 

        {{#if isIrdPayment}} 
        {{> app_templates_irdPayment.amountDescription.template}} 
        {{else}} 
        {{#with moveMoneyToPayeeDocument}} 
        <div class="sub-section major"> 
         <div class="sub-section-header">AMOUNT</div> 
         <div class="sub-section-body"> 

          <input id="amount" name="moveMoneyToPayeeDocument.Amount" 
            type="text" step="0.01" 
            placeholder="Amount" value="{{unformatCurrency Amount}}" 
            class="required number amount-input"/> 

         </div> 
        </div> 

        <div class="sub-section major"> 
         <div class="sub-section-header">Description</div> 
         <div class="sub-section-body" id="divDescriptionContainer"> 
          {{> app_templates_moveMoneyTo.description.template}} 
         </div> 
        </div> 

        {{/with}} 
        {{/if}} 


        {{#with moveMoneyToPayeeDocument}} 
        <div class="sub-section major"> 
         <div class="sub-section-header">SCHEDULING</div> 
         <div class="sub-section-body"> 
          <div class="transfer-date"> 

           <div id="divTransferDate" 
            class="input-section move-money-to-recurring-section {{#if isRecurring}} collapse {{else}} in collapse {{/if}}" 
           {{#unless isRecurring}} style="height: auto;" {{/unless}}> 
           <div> 
            <label for="date">Transfer date</label> 
            <input id="date" class="date-input" type="text" placeholder="Date" 
              min="{{today this}}" 
              data-date-min="{{today this}}" 
              value="{{formatDate TransferDate 'input'}}"/> 
           </div> 
          </div> 


          <div class="input-section last"> 
           <div> 
            <label class="checkbox"> 
             <input id="recurringTransaction" type="checkbox" 
               data-target=".move-money-to-recurring-section" data-toggle="collapse" 
             {{#if isRecurring}} checked="checked" {{/if}} 
             > Recurring transaction 
            </label> 
           </div> 
          </div> 

          <div id="divSchedulingDetails" class="move-money-to-recurring-section {{#if isRecurring}} in collapse {{else}} collapse {{/if}} "> 
           {{#with ScheduleDetails}} 
           <div id="recurringSection"> 
            {{> app_templates_moveMoneyTo.scheduling.template }} 
           </div> 
           {{/with}} 
          </div> 


         </div> 
        </div> 
        {{/with}} 

       </div> 
      </form> 
     </div> 

     <div class="buttons-container"> 
      <button id="next" class="btn btn-item btn-primary" disabled="disabled">NEXT</button> 
      <button id="cancel" class="btn btn-item btn-dark">BACK</button> 
     </div> 
    </div> 
</div> 

버튼의 위치가 form 및 {{with}} 블록 외부에있는 한 인 차이. 백본보기에

'click #next': 'onNext' 

나는 이것이 click 이벤트 처리기 바인딩이라고 가정합니다. 그것은 id에 의해 구속력이있는 것으로 보입니다. 버튼이 어디에 있는지는 중요하지 않습니다. 않는 한 ... 부트 스트랩 클래스 중 하나가 특정 의미를 가지고 있으며 양식 제출의 역할을하지 않는 한?

저는 백본/핸들 바/부트 스트랩 콤보를 처음 접했기 때문에 자신을 합리적으로 잘 설명했기를 바랍니다.

Answer 1

버튼이 양식 요소 안에 있으므로 양식을 제출하는 것이 빠른 추측입니다! 다음과 같이

버튼 유형을 추가

<button type='button'> 

참조 :

https://stackoverflow.com/a/9315482/566092