javascript - 折叠 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>

当我点击提交按钮时，它没有提交表单。

(我怀疑“折叠”链接到整个容器 div，因此它阻止了点击)

<小时/>

我尝试使用 jQuery 函数提交表单:

function submitForm(i) {

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

对于提交按钮上的 .submit() ，不会执行任何操作或 console.log 执行任何操作。它也不会折叠打开的 div。

// and also this variation

function submitForm(i) {

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

对于 .click()，第一次单击时，它只是关闭打开的底部 div，但不会在 console.log 中记录任何内容。

第二次单击时，它会打印日志“AAA”两次。事实上，表单没有再次提交(我在网络上看不到它，页面也没有改变)。

这是一个JSFiddle

Answer 1

为什么要在 html 中添加 onclick 函数，然后将事件列表器添加到同一个按钮？您可以尝试这个代码，它正在工作

$('#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 控制台日志记录的位置。