Question

使用JEditable JQuery插件，一切似乎在Firefox中运行良好。但是，在Chrome浏览器中，只要我从JEditable下拉列表中选择了某些内容，或者在编辑JEditable文本框时单击了Enter，就会提交动态格式的JEditable，并且我的整个页面都在刷新。我并不希望这种情况发生，因为我已将其配置为调用自定义函数，该函数调用Ajax进行更新。在更改其中一个表单输入的值时，如何保持JEditable表单不被提交？

我对在线研究的理解是，这是一个Webkit浏览器问题，而不仅仅是Chrome问题，因为当表单中的输入发生变化时，基于Webkit的浏览器似乎会自动提交表单。

Answer 1

经过多次反复试验后，我发现一种解决方法是使用JEditable的绑定功能。使用bind函数可以访问JEditable创建的表单，并且可以使用它来劫持onsubmit事件。

首先，创建一个函数来覆盖表单上的onsubmit事件。

var bindSubmitDisableWebkitSubmission = function(settings, self){

        $('form', self).attr("onsubmit", "return false;");
    }

然后将该功能绑定到您不想提交表单的各种JEditable事件。

$.editable.types['select'].plugin = bindSubmitDisableWebkitSubmission;

请注意，使用preventDefault并返回false（见下文）并不起作用。

function bindSubmitDisableWebkitSubmission (settings, self) {
         $('form', self).submit(function(e){
            e.preventDefault();
            return false;
        });
    }

如何使用Webkit浏览器防止JEditable表单提交

1 个答案: