按钮onclick刷新页面

Question

我有一个样式像按钮的 div：

    <form class="ui form segment" name="form" id="myForm" method="POST" style="max-width:950px;">

        <!-- Some fields omitted -->

        <!-- Normal button that has onclick event attached --> 
        <div class="ui blue submit button" id="applyButton" style="width:150px" name="apply">Update</div>


  <!-- 2 submit buttons -->

  <input type ="submit" class="ui blue submit button" id="publish" value = "Publish" style="width:150px" name="publish" onclick="submitForm('/write/submitWork'); this.disabled=true; this.className += ' disabled'; this.value='Sending…'; "/>

  <input class="ui orange submit button" id="saveasdraft" value ="Save as draft" style="width:160px" name="saveasdraft" onclick="submitForm('/write/submitWork'); this.disabled=true; this.className += ' disabled'; this.value='Sending…'; "/>

    </form>

这里是submitForm() 函数，它根据传入的操作提交表单：

function submitForm(action)
    {
        document.getElementById('myForm').action = action;
        document.getElementById('myForm').submit();
    }

我附加了一个 onclick 事件，它从 ajax 请求中获取一些数据并将其打印在屏幕上：

$(document).on('click', '#applyButton', function (e) {

    e.preventDefault();
    // for each input radio button
    $('input[type=radio]').each(function () {
        // if the radio button is checked
        if ($(this).is(":checked")) {
            if (!$("#characterList div:contains(" + $(this).val() + ")").length) {
                $('#characterList').append('<div class="ui card"><div class="content"> <div class="header">' + $(this).val() + '</div><div class="description"><p>' + getCharacterData($(this).val()) + '</p></div></div></div>');
            }
        } else {
            $("#characterList div:contains(" + $(this).val() + ")").remove();

        }

    });
});

问题在于它会刷新页面，有时就像表单的提交按钮一样。我不希望它这样做。

这是一个link 的一个活生生的例子。 （点击字符部分的蓝色“更新”按钮）

编辑：

该链接要求用户登录，因此您可以使用我制作的这个测试登录：

邮箱：test@hotmail.com

密码：Testuser1

这里还有进行 AJAX 调用的 getCharacterData() 函数：

function getCharacterData(subject)
        {
        $.ajax({
                url: '/profile/getCharacterTripleData',
                type: 'GET',
                async: false,
                data: { field1: subject},
                success: function (data) {
                //your success code
                response = data;
                },
                error: function (xhr, ajaxOptions, thrownError) {
                //alert("Error: " + thrownError);
             }

            });

            return response;

        }

Answer 1

我不知道您使用的是什么 JavaScript 框架。但是您真正的源代码包含<input class="ui blue submit button" id="applyButton" value = "Update" style="width:150px" name="apply"/>，而不是您声称的<div class="ui blue submit button" id="applyButton" style="width:150px" name="apply">Update</div>。也许有一些 JavaScript 为每个输入标签添加了一个表单提交，我不知道，JavaScript 太大而无法调试。

将其更改为 <div>，正如您在帖子中所描述的那样，也许这会起作用。

编辑：或者/另外，您的框架中可能存在一些代码，这些代码会在类提交或按钮上触发。删除这些类，然后重试。