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

Question

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

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

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

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

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);
       });
     });

Answer 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();
});