Question

我对我在网站上尝试的代码有疑问。我想最小化写作的大小，所以我试图通过简单的点击隐藏对象。但这确实提交了我的表格。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $("table").hide();
    });
    $("#show").click(function(){
        $("table").show();
    });
});
</script>
</head>
<body>


<table style="border:solid #FFFFFF 2px;
background-color:#0000ff;height:1px;width:300px;
text-align:left;" "empty-cells:hide;" border="1" cellpadding="1" cellspacing="1">
    <tr>
        <th>Test</th>
        <th>Extras</th>
        <th>Extras</th>
    </tr>
</table>
<br>

<button id="hide">Hide</button>
<button id="show">Show</button>

</body>
</html>

[submit class:button id:form-submit "Send"]

Answer 1

您需要为事件使用.preventDefault（）函数。单击按钮时会阻止发送。请注意，您需要在参数（e）中发送事件。

一个例子：

$("#hide").click(function(e){
    e.preventDefault();
    $("table").hide();
});

Answer 2

这是一个缩短脚本的解决方案

＆＃13;

$(document).ready(function(){
    $("#switch").click(function(){
        $("table").toggle();
        $("#switch").text(($("#switch").text() == "Hide") ? "Show" : "Hide");
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table style="border:solid #FFFFFF 2px;
background-color:#0000ff;height:1px;width:300px;
text-align:left;" "empty-cells:hide;" border="1" cellpadding="1" cellspacing="1">
    <tr>
        <th>Test</th>
        <th>Extras</th>
        <th>Extras</th>
    </tr>
</table>
<br>

<button id="switch">Hide</button>

＆＃13;

Answer 3

在按钮

中添加type="button"

<button type="button" id="hide">Hide</button>
<button type="button" id="show">Show</button>

Answer 4

嗯，这里没有元素，现在显示和隐藏工作正常。但也许当你以某种形式使用它时，问题就会发生。要解决该问题，请使用以下内容：

$(document).ready(function(event){
    $("#hide").click(function(){
        $("table").hide();
        return false;
    });
    $("#show").click(function(){
        $("table").show();
        return false;
    });
});

- 或 -

$(document).ready(function(event){
    event.preventDefault();
    $("#hide").click(function(){
        $("table").hide();
    });
    $("#show").click(function(){
        event.preventDefault();
        $("table").show();
    });
});

Answer 5

如果没有任何进一步的问题，那就更容易了

> <button title="Click to show/hide content" type="button"
> onclick="if(document.getElementById('Funktionen')
> .style.display=='none') {document.getElementById('Funktionen')
> .style.display=''}else{document.getElementById('Funktionen')
> .style.display='none'}">+</button> <div id="Funktionen"
> style="display:none;">   HERE COMES IN WHATEVER YOU WANT TO HIDE WITH
> the + Button </div>

如何不在jQuery中提交表单

5 个答案: