阻止表單提交關閉列表項

Question

我有一個包裝在CSS不顯示的列表項中的表單。 要查看表單，用戶單擊導致jquery調用slideToggle的按鈕。 很好，不幸的是，當用戶單擊表單的“提交”按鈕時，它會將列表項反轉回不顯示任何內容。 壞。 因為用戶看不到任何表單提交錯誤。 我正在嘗試阻止同時關閉表單的“提交”按鈕。 該表單是使用Wordpress插件Gravityforms創建的，因此我無法更改表單提交代碼。 （我不認為？）

這是HTML

<ul class="contact">
   <li>class="gravity-form">
   <div>
      <form>
        <div></div>
        <div></div>
        <div></div>
        <div class="gform_footer left_label">
        <input type="submit" id="gform_submit_button_1" class="button gform_button"
        value="Submit" tabindex="5">
        </div>           
      </form>
   </div>
   </li>
</ul>

有任何想法嗎。 我在想讓jQuery選擇器向上移動DOM，以迫使列表項顯示：list-item？

提前致謝

Answer 1

查看有關事件傳播的本文 。 使用event.stopPropagation()將阻止事件冒泡DOM，而不會阻止默認操作。

<input type="submit" id="gform_submit_button_1" class="button gform_button"
    value="Submit" tabindex="5" onclick="stopEvent(event);">

在您的JavaScript中：

function stopEvent(event)
{
    event.stopPropagation();
}

現在，當您單擊按鈕時，您的父元素將不會收到click事件。