Question

当我点击accordion表单提交的图标时，我无法弄清楚如何防止POST的默认行为。

<tr data-toggle="collapse" data-target="#record_309" class="accordion-toggle even">

                            <td>
                            </td>
                            ...
                            <td class="action">                                      
<div class="col-lg-12">
    <form class="col-lg-3" action="/dashboard/settings/" method="get">
        <input type="hidden" name="product_id" value="309">
        <input style="max-width:15px;" type="image" onclick="preventAccordion(event);" src="/static/icons/alarm-1.png">
    </form>
    <form class="col-lg-3" action="/products/reset/" method="post"><input type="hidden" name="csrfmiddlewaretoken" value="<CSRFTOKEN>">
        <input type="hidden" name="product_id" value="309">
        <input style="max-width:15px;" type="image" src="/static/icons/restart.png">
    </form>    
</div>        
</td>        
</tr>

正如您所看到的，在最后一列的第一种形式中，我试图调用preventAccordion(e)函数以防止显示手风琴。问题是preventDefault(event)阻止了表单提交。

<script>
        window.preventAccordion = function(e) {
            e.preventDefault();
        }
</script>

当用户点击此图标时，您知道如何阻止手风琴切换吗？

Answer 1

改为使用e.stopPropagation()。

请注意，这不会阻止同一元素上的其他处理程序从跑步。 http://api.jquery.com/event.stopPropagation

示例：http://jsfiddle.net/1o78c2os/2/

单击提交输入时如何防止手风琴切换？

1 个答案: