Question

我正在使用jQuery（＆＃34;点击＆＃34;，function（））。

当我创建按钮或输入类型=＆＃34;提交＆＃34; 时，网格中的宽度和高度不会发生变化。例如，当我使用 h4 时，它可以正常工作。问题是什么？

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

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

HTML

＆＃13;

<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>

＆＃13;

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

＆＃13;

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

jQuery on（）方法 - 不使用<input type =“”“submit”=“”/>或<button>

1 个答案: