jQuery on() 方法 - 不适用于 <input type "submit"> 或 <button> [重复]

Posted 2023-05-07

【中文标题】jQuery on() 方法 - 不适用于 <input type "submit"> 或 <button> [重复]

【英文标题】：jQuery on() method - not working with <input type "submit"> or <button> [duplicate]

【发布时间】：2018-05-06 11:48:31

【问题描述】：

我在 jQuery on("click", function()) 上苦苦挣扎。

当我创建 button 或 input type="submit" 时，我的网格中的宽度和高度不会改变。例如，当我使用 h4 时，它可以工作。它有什么问题？

我创建了一个 jsfiddle 来向您展示问题所在。 https://jsfiddle.net/Mitzi_Rebel/gdsesnpv/6/

我对 javascript 完全陌生，这是我的第一个 ***。非常感谢您的帮助！

HTML

<form id="sizePicker">
       Grid Height:
       <input type="number" id="input_height" name="height" min="1" value="20">
       Grid Width:
       <input type="number" id="input_width" name="width" min="1" value="20">
    
       <input type="submit" id="size"> //doesn't work
       <button>Button Submit</button>  //doesn't work
       <h4>Überschrift Submit</h4>  //works
     </form>

    var height;
    var width;
   
    $(document).ready(function()  
       $("h4").on("click", function()
       height = (document.getElementById("input_height").value + "px");
       width = (document.getElementById("input_width").value + "px");
       $("tr").css("height", height);
       $("td").css("width", width);
       );
     );

【问题讨论】：

jsfiddle.net/gdsesnpv/7 为我工作

【参考方案1】：

您想在使用按钮时使用 e.PreventDefault 来防止表单提交和页面重新加载。

$("#size").on("click", function(e)

    height = (document.getElementById("input_height").value + "px");
    width = (document.getElementById("input_width").value + "px");
    $("tr").css("height", height);
    $("td").css("width", width);

    e.preventDefault();
);

【讨论】：

有效！谢谢！