确定从 jQuery/JavaScript 中单击了哪个提交按钮

Determining which submit button was clicked from jQuery/JavaScript

提问by clifgriffin

I'm ajaxifying some forms from a PHP application I didn't write. To do this, I came up with this clever solution:

我正在从一个我没有编写的 PHP 应用程序中对一些表单进行 ajaxifying。为此，我想出了这个聪明的解决方案：

jQuery("form").submit(function(event) {
    // get some values from elements on the page:
    var the_form = jQuery(this);
    var data = the_form.serialize();
    var url = the_form.attr( 'action' );
    var button = event.originalEvent.explicitOriginalTarget;

    data = data + "&" + button.name + "=" + button.value;

    // Send the data using post and put the results in a div
    jQuery.post( url, data, function() {
        //Do something crazy
    });

    // stop form from submitting normally
    if (event.preventDefault) 
    { 
        event.preventDefault(); 
    } 
    else 
    {
        event.returnValue = false; 
    }
});

Which works perfectly. I went away rejoicing. The problem is, I inadvertently used a Mozilla/Gecko only property to determine which button was clicked. (event.originalEvent.explicitOriginalTarget) Which means this only works in Firefox. :-(

哪个工作得很好。我高兴地走了。问题是，我无意中使用了 Mozilla/Gecko only 属性来确定单击了哪个按钮。( event.originalEvent.explicitOriginalTarget) 这意味着这仅适用于 Firefox。:-(

All of this is necessary because the web app I'm augmenting relies on the button name/value being in the post data to process the form correctly. So, my question in simple terms would be:

所有这些都是必要的，因为我正在扩充的 Web 应用程序依赖于发布数据中的按钮名称/值来正确处理表单。所以，我的问题简单来说是：

What is the best, cross-browser way to determine which button was clicked in jQuery's submit event?

确定在 jQuery 的提交事件中单击了哪个按钮的最佳跨浏览器方法是什么？

Edit:And here is my solution.

编辑：这是我的解决方案。

jQuery("some selector that targets your form").find(":submit").click(function(event) {
    // get some values from elements on the page:
    var the_form = jQuery(this).parents("form");
    var data = the_form.serialize();
    var url = the_form.attr( 'action' );
    var button = event.target;

    data = data + "&" + button.name + "=" + button.value;

    // Send the data using post and put the results in a div
    jQuery.post( url, data, function() {
        //Do something crazy
    });

    // stop form from submitting normally
    if (event.preventDefault) 
    { 
        event.preventDefault(); 
    } 
    else 
    {
        event.returnValue = false; 
    }
});

采纳答案by greggreg

See this question: Crossbrowser equivalent of explicitOriginalTarget event parameter

看到这个问题：Crossbrowser等效于explicitOriginalTarget事件参数

You're going to have to attach the event listeners to the buttons instead of the form to get a good reliable way of determining which one fired the submit.

您将不得不将事件侦听器附加到按钮而不是表单，以获得确定哪个触发提交的可靠方法。

回答by Tgr

Using click handlers to submit the form is problematic beacuse you cannot use submit event handlers for validation (which is the way pretty much any validator plugin does it). Also, when you are not using AJAX to post, disabling submit buttons can have weird effects in some browsers if done in the click event and not the submit event.

使用单击处理程序提交表单是有问题的，因为您不能使用提交事件处理程序进行验证（几乎所有验证器插件都是这样做的）。此外，当您不使用 AJAX 发布时，如果在点击事件而不是提交事件中禁用提交按钮，则在某些浏览器中可能会产生奇怪的效果。

The way jQuery.Formsolves this is to set up a click handler which stores the clicked button (and then clears it with a small timeout), and use the submit handler to actually send the form contents via AJAX.

jQuery.Form解决这个问题的方法是设置一个点击处理程序来存储被点击的按钮（然后在一个小的超时时间内清除它），并使用提交处理程序通过 AJAX 实际发送表单内容。

回答by Shaddy Zeineddine

Here is a function I used to "ajaxify" my forms with jQuery.

这是我用来使用 jQuery“ajaxify”我的表单的函数。

function ajaxifyForm(form, callback)
{
    var clicked

    form.find("button").click(function()
    {
        if (clicked != null) clicked.removeAttr("data-clicked")
        clicked = $(this)
        $(this).attr("data-clicked", 1)
    })

    form.submit(function(event)
    {
        var data = {}
        var name = ""

        form.find(":input").each(function()
        {
            var input = $(this)

            if (!(name = input.attr("name"))) return

            switch (input.attr("type"))
            {
                case "radio":
                case "checkbox":
                    if (input.attr("checked")) data[name] = input.val()
                    break
                case "submit":
                    if (input.attr("data-clicked")) data[name] = input.val()
                    break
                default:
                    data[name] = input.val()
            }
        })

        $.ajax({
            url: form.attr("action"),
            success: function(data)
            {
                if (typeof callback == "function") callback("success")
            },
            error: function()
            {
                if (typeof callback == "function") callback("error")
            },
            data: data,
            type: form.attr("method")
        })

        return false
    })

    return form
}

回答by leon

http://api.jquery.com/event.target/

http://api.jquery.com/event.target/

jquery.event.target should work because it is normalised for most browsers.

jquery.event.target 应该可以工作，因为它已针对大多数浏览器进行了规范化。

jquery.event.currentTarget can be used to retrieve the current item in the event bubbling chain.

jquery.event.currentTarget 可用于检索事件冒泡链中的当前项。

Edit-- After some reflection and @greg's suggestion: I've posted a code snippet on jsfiddle.

编辑 - 经过一些反思和@greg 的建议：我在 jsfiddle 上发布了一个代码片段。