Question

我在表单中有两个按钮，当按任意顺序点击时，我想触发一个事件。

它类似于ajax承诺：

$.when($.ajax({url:"/person"}),$.ajax({url:"/car"}))
.done(function(person,car){
   // do someting with person and car
});

有没有办法用按钮做同样的事情＆＃39;点击活动？像

这样的东西

$.when($("#button_a").click,$("#button_b").click)
.done(function(ba,bb){
   // do someting with clicks
});

谢谢......

Answer 1

您只需使用活动即可。

function DoSomething () 
{
    // do something
}

$("#button_a").click(DoSomething);
$("#button_b").click(DoSomething);

Answer 2

您可以在单击的按钮上设置类或数据属性，并在发生单击时检查其他按钮是否具有该类。例如：

＆＃13;

$(".twin").click(function() {
  $(this).addClass("clicked");
  if($(".twin").not(this).hasClass("clicked")) {
    alert("both clicked");
    $(".twin").removeClass("clicked");
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="twin">Click1</button>
<button class="twin">Click2</button>

＆＃13;

您也可以使用不同的处理程序执行相同操作。

Answer 3

尝试

var promises = [],
    dfd = new $.Deferred(),
    buttons = $("[id$=a], [id$=b]");

buttons.eq(0).on("click.two", function (e) {
    // if `promises` does not contain `e.target` item
    // push item to `promises`
    if (promises[0] !== e.target) {            
      promises.push(e.target);
    }
    two()
});

buttons.eq(1).on("click.two", function (e) {
    // if `promises` does not contain `e.target` item
    // push item to `promises`
    if (promises[0] !== e.target) {            
      promises.push(e.target);
    }
    two()
});

var two = function () {
    // `resolve` `dfd` when `promises.length` === `buttons.length`
    // else `notify` `promises.length`
    return $.when(promises.length === buttons.length 
                  ? dfd.resolve(promises) 
                  : dfd.notify(promises.length))
};

dfd.then(function (p) {
    // do stuff when both `buttons` 
    // clicked in any order
    console.log(p[0], p[1]);
    $(promises).off("click.two")
}, null, function (msg) {
    // notify `promises` length
    console.log(msg)
});

var promises = [],
    dfd = new $.Deferred(),
    buttons = $("[id$=a], [id$=b]");

    buttons.eq(0).on("click.two", function (e) {
        // if `promises` does not contain `e.target` item
        // push item to `promises`
        if (promises[0] !== e.target) {            
          promises.push(e.target);
        }
        two()
    });

    buttons.eq(1).on("click.two", function (e) {
        // if `promises` does not contain `e.target` item
        // push item to `promises`
        if (promises[0] !== e.target) {            
          promises.push(e.target);
        }
        two()
    });

var two = function () {
    return $.when(promises.length === buttons.length 
                  ? dfd.resolve(promises) 
                  : dfd.notify(promises.length))
};

dfd.then(function (p) {
    // do stuff when both `buttons` clicked
    // in any order
    console.log(p[0], p[1]);
    $(promises).off("click.two")
}, null, function (msg) {
    // notify `promises` length
    console.log(msg)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="button_a">a</button><button id="button_b">b</button>

Answer 4

只需将点击事件添加到按钮

即可

$("#button_a, #button_b").click(function(){
     // do something code
});//click event

以任意顺序单击两个按钮时执行功能

4 个答案: