Question

我有一个按钮，我在一个表单的中间，我想通过ajax提取一些信息。我创建了一个函数，按钮设置如下：

<button id="class-list" onclick="updateMc()" class="btn btn-warning" style="margin: 0;">Update MC</button>

我有这样的功能设置：但是这仍然提交表单。

function updateMc(event){
            event.preventDefault();
            var companyMc = $('#company_mc').val();
            $.ajax({
                type: "POST",
                url: "/saferscrapers",
                data: {
                    'company_mc': companyMc
                },
                complete: function(response) {
                    var responseText = response.responseText;
                    var json = jQuery.parseJSON(responseText);
                    for (var key in json){
                        if (json[key] != '') {

                            var element = document.getElementById(key);

                            if (element.type == 'checkbox') {
                                element.checked = (json[key] == "true");
                                element.value = (json[key] == "true" ? '1' : '0' );

                            }
                            else {
                                element.value = json[key];
                            }


                        }

                    }
                }
            });

        }

Answer 1

您有两种选择：

将事件参数传递给函数：
```
<button id="class-list" onclick="updateMc(event)" class="btn btn-warning" style="margin: 0;">Update MC</button>

```
这适用于现代浏览器的跨浏览器，因为即使在没有全局event的浏览器上，event生成的函数的范围内也只有onclick。< / p>
请注意，它将不适用于旧IE（IE8及更早版本）或IE中的兼容模式＆＃34;它破坏了自己，因为旧的IE在事件对象上没有preventDefault方法。

另请注意，使用onXyz属性要求您的函数是全局变量，并且全局命名空间已经非常拥挤。

使用现代事件处理技术动态地连接处理程序：

<button id="class-list" class="btn btn-warning" style="margin: 0;">Update MC</button>

然后：

$("#class-list").on("click", updateMc);

考虑到解决方案＃1的问题，我使用解决方案＃2。

Answer 2

您可以使用jquery函数替换按钮标记中的onclick。

的情况是使用动态内容来推荐首先使用它，好像某些东西使用第二个选项。

$('body').on('click', '#class-list', function(e){
    e.preventDefault();

    // code ...

});

OR

$('#class-list').click(function(e){
    e.preventDefault();

    // code ...

});

在函数中使用preventDefault（）的问题

2 个答案: