折りたたまれたDivの内部が送信されない

Question

親divの下部に折り畳まれたdivがあります。頭をクリックすると、下に拡大しています。

<div class="container" onclick="userClicked('product-{{ $counter }}')" data-toggle="collapse" href="#product-{{ $counter }}" id="product-{{ $counter }}-2"> 
    <div class="row collapse" id="product-{{ $counter }}"> 
     <!-- Some other divs --> 
     <div class="row"> 
      <form role="form" method="POST" id="productsForm-{{ $counter }}" action=""> 
       <input type="hidden" name="actionType" value="productsList"> 
       <input type="hidden" name="selectedProduct" value="{{ $k }}"> 

       <button type="submit" id="productsFormSubmit-{{ $counter }}" class="glyphicon glyphicon-pencil" onclick="submitForm({{ $counter }})"></button> 
      </form> 
     </div> 
    </div> 
</div> 

[送信]ボタンをクリックすると、フォームは送信されません。

function submitForm(i) { 

    jQuery('#productsForm-'+i).submit(function() { 
     console.log("AAA") 
    }) 
} 

：

私はjQueryの機能でフォームを送信しようとした

---

（私はこのようにクリックをブロックし、「崩壊」が全体のコンテナのdivにリンクされていると思われます）

サブミットボタンの.submit()については、何もやらない。開いているdivを折りたたむことはありません。 .click()については

// and also this variation 

function submitForm(i) { 

    jQuery('#productsFormSubmit-'+i).click(function() { 
     console.log("AAA") 
    }) 
} 

、最初のクリックで、それだけでオープン底のdivを閉じますが、何もCONSOLE.LOGしません。

2回目のクリックで、ログ「AAA」が2回印刷されます。実際には、フォームは再提出されません（ネットワーク上には表示されず、ページは変更されません）。ここで

は、HTMLでのonclick関数を追加なぜ、あなたは同じボタンにイベントリスターを追加JSFiddle

Answer 1

のですか？ あなたはそれが

$('#submitForm-1').on("click",function(event) { 
    // to prevent div collapse 
    event.stopPropagation(); 
    console.log("AAA"); 
}); 
$('#productsForm-1').on('submit',function(event) { 
    console.log("submitted"); 
}) 

とhtml

<div class="container col-md-5" data-toggle="collapse" href="#product-1" id="product-1-2" style='background-color: lightblue'> 
    CLICK 
    <div class="row collapse" id="product-1" style="background-color:red"> 
     <!-- Some other divs --> 
     <div class="row" style="right:100px"> 
      <form role="form" method="POST" id="productsForm-1" action=""> 
       <input type="hidden" name="actionType" value="productsList"> 
       <input type="hidden" name="selectedProduct" value="VAL"> 

       <button type="submit" id="submitForm-1" class="glyphicon glyphicon-pencil"></button> 
      </form> 
     </div> 
    </div> 
</div> 

作業、ここで Demoコンソールロギングされているこのコードを試すことができます。