javascript - jquery的简单追加问题

Question

我有一个简单的问题。我的 JS 代码是这样的，但是当我尝试向中添加新元素或内容时<div>，它会出现然后迅速上升。我不知道为什么。

我怎样才能避免这种情况？

        <head>
            $(document).ready(function () {
                $('#mybtn').click(function () {
                    $('#main').append('<button id ="mm" onclick="myfun()">generate code my fun.</button>');
                });
            });
         </head>
        <body>
  <form id="form1" runat="server">
            <button id ="mybtn">generate code</button>
            <div id="main"></div>
</form>
    </body>

score 1 · Accepted Answer

尝试这个：

$('#mybtn').click(function (e) {
      e.preventDefault();
      $('#main').append('<button id ="mm" onclick="myfun()">
generate code my fun </button>');
      return false;
});

score 1 · Accepted Answer

您应该通过将按钮设置type为button.

例子：

<button type="button" id="mybtn">generate code</button>

<button>元素的默认类型是提交。这导致您的<FORM>标签提交。

score 0 · Accepted Answer

尝试：

$('#mybtn').click(function (event) {
      event.preventDefault();
      $('#main').append('<button id ="mm" onclick="myfun()"> generate code my fun </button>');
});

preventDefault：如果调用该方法，则不会触发事件的默认动作。

javascript - jquery的简单追加问题

3 回答 3

Related

Reference