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任何操作。它也不会破坏open 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功能然后将事件Lister添加到同一个按钮？您可以尝试使用此代码

$('#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 。

表格内部折叠的Div不会被提交

1 个答案: