jquery - 按钮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一个活生生的例子。 (单击字符部分中的蓝色“更新”按钮)

编辑:

该链接要求用户登录，以便您可以使用我创建的这个测试登录:

Email: test@hotmail.com

Password: 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> ，正如您在帖子中所述，也许这会奏效。

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