按钮b是异步

Question

我有一个按钮（比如按钮A），它将点击事件转发到另一个按钮（比如按钮B）。

$("#buttonA").click(function()
{
  $("buttonB").click();
});

但是现在我希望它在按钮B事件完成后从按钮A触发时在回调函数中执行其他操作。问题是，我希望使用的语法与将click事件绑定到按钮B相同代替：

$("#buttonA").click(function()
{
  $("#buttonB").click(function()
  {
    alert("I want this to happen only after buttonA is clicked and buttonB's onclick event finishes.")
  });
});

我理解为什么上面的内容不起作用，但我应该在这里做些什么呢？

注意：ButtonB正在进行异步ajax表单提交。

Answer 1

这样做：

$("#buttonA").click(function()
{
  $("#buttonB").click(function()
  {
    alert("I want this to happen only after buttonA is clicked and buttonB's onclick event finishes.")
  });
});

您正绑定#buttonB上的活动，这不是您想要的。只需在.click()之后插入代码，它就会在点击事件结束后执行：

$("#buttonA").click(function()
{
  $("#buttonB").click();
  alert("I want this to happen only after buttonA is clicked and buttonB's onclick event finishes.");
});

按钮b是异步

b是异步的，你不应该使用.trigger()的匿名函数。在这里你能做什么：

function doSomething(e){
    e = typeof e === "undefined" ? new Event() : e;
    //your code when b is clicked...

    //Then ajax
    return $.ajax('www.example.com');
}

$('#buttonB').on('click', doSomething);

$('#buttonA').on('click', function(){
    doSomething().done(function(){
        alert("I want this to happen only after buttonA is clicked and buttonB's onclick event finishes.")
    })
})

Answer 2

使用触发功能触发按钮B上的单击

$("#buttonA").click(function()
{
  $("#buttonB").click(function()
  {
    alert("I want this to happen only after buttonA is clicked and buttonB's onclick event finishes.")
  });
  $("#buttonB").trigger('click');
});

Answer 3

您的事件处理程序不是异步的，因此您可以在触发其他事件后立即执行“回调”：

$("#buttonA").click(function()
{
  $("#buttonB").click();
  alert("I want this to happen only after buttonA is clicked and buttonB's onclick event finishes.")
});

http://jsfiddle.net/2Rr7V/

现在，如果按钮B正在执行异步操作，例如执行AJAX调用，那么我认为最好的做法是将异步部分重构为一个单独的函数，该函数可以进行回调并直接调用它。

恕我直言，如果您发现自己需要在另一个控件上触发某个事件，那么您可能做错了，而应该将您想要的一些代码重构为一个可以调用的单独函数没有“假装”事件。极少数情况（但并不是说没有案例）触发事件是有意义的。

类似于：

$("#buttonB").click(function() {
    // do any buttonB specific stuff
    DoAsyncThing();
});

$("#buttonA").click(function() {
    // do any pre-async stuff
    DoAsyncThing(function() {
        alert("Async thing is done");
    });
});

function DoAsyncThing(callback) {
    $.ajax(...).done(function() {
        if (callback && typeof callback === "function") {
            callback();
        }
    });
}

或者您甚至只是从ajax请求中返回承诺，以便您可以附加done处理程序。

Answer 4

感谢大家的输入

我最终使用以下jquery.Callback代码解决了问题，该代码似乎按预期工作：

function clickB()
{
    $("buttonB").click();
}

function doAlert()
{
    alert("Happens after B!");
}

function doA()
{
var callbacks = $.Callbacks();
    callbacks.add(clickB);
    callbacks.add(doAlert);
    callbacks.fire();
}

$("buttonA").click(function()
{
    doA();
});

在jquery中为单击添加回调

4 个答案:

按钮b是异步