Question

我的网站上有一个表单列表，其中包含JS / AJAX，点击后提交表单。 JavaScript根据活动元素确定提交类型。这已经在多个浏览器中找到了。

问题：基本上，MAC上的Safari（版本10.0.2）认为activeElement是表单而不是按钮，因此getAttribute返回null。有没有办法获得点击的元素？我需要知道用户点击了哪个按钮。

HTML Stuff：

<div id="#Records">
<form action="update.php" method="post">
  ...
  <input name="submit" type="submit" data-action="send" value="send stuff" />
  <input name="submit" type="submit" data-action="update" value="update" />
  <input name="submit" type="submit" data-action="delete" value="delete" />
</form>
</div>

JavaScript内容

    $("#Records form").submit(function (e) {
        e.preventDefault();
        var url = this.action;
        var data = $(this).serializeArray();
        var action = document.activeElement.getAttribute('data-action');
        data.push({ name: 'submit', value: action });

        $.ajax({
            type: "POST",
            data: data,
            cache: false,
            url: url
        }).done(function (data) {
            $("#Records").html(data);
        }).fail(function (result) {
            ShowMessage("Error updating record!");
        });

        return false;
    });

Answer 1

好的，基于Tiny Giant和其他评论，我已将代码更改为此。不确定它是最好的方法，但似乎在我测试过的任何地方都能正常工作。

注意简化，欢迎评论

HTML

<div id="#Records">
 <form action="update.php" method="post">
  ...
  <input type="button" onclick="return $(this).processRequest(this, 'send');" data-action="send" value="send stuff" />
  <input type="button" onclick="return $(this).processRequest(this, 'update');" data-action="update" value="update" />
  <input type="button" onclick="return $(this).processRequest(this, 'delete');" data-action="delete" value="delete" />
 </form>
</div>

的JavaScript

jQuery.fn.processRequest =
function(button, action)
{
    var form = $(button).parents('form');
    var url = form[0].action;
    var data = $(form).serializeArray()
    data.push({ name: 'submit', value: action });

    $.ajax({
        type: "POST",
        data: data,
        cache: false,
        url: url
    }).done(function (data) {
        $("#Records").html(data);
    }).fail(function (result) {
        ShowMessage("Error updating record!");
    });

    return false;
}

Answer 2

你不能使用e.currentTarget而不是活动元素来获取元素吗？像

这样的东西

var action = $(e.currentTarget).attr('data-action');

（我假设按钮点击导致提交）

JavaScript ActiveElement表单不是Safari的按钮

2 个答案: