web-dev-qa-db-ja.com

JQuery.trigger（ 'click'）の取得方法マウスクリックを開始する

JQueryを使ってマウスクリックをシミュレートする方法を理解するのに苦労しています。誰かが私が間違っていることについて私に知らせてください。

HTML：

<a id="bar" href="http://stackoverflow.com" target="_blank">Don't click me!</a>
<span id="foo">Click me!</span>

jQuery：

jQuery('#foo').on('click', function(){
    jQuery('#bar').trigger('click');
});

デモ： フィドル

#fooボタンをクリックしたときに#barのクリックをシミュレートしたいのですが、これを試みても何も起こりません。私はjQuery(document).ready(function(){...})も試しましたが成功しませんでした。

javascriptjqueryhtmltriggerseventtrigger
129
lickmycode

jQuery('#bar')[0].click();を使用して、実際のDOM要素 （jQueryオブジェクトではない）上でマウスクリックをシミュレートする必要があります。代わりに.trigger() jQueryメソッドを使用してください。

注意：DOM Level 2 .click()は、Safariの いくつかの要素では動作しません 。回避策を使用する必要があります。

http://api.jquery.com/click/

249
Alex W

次のように.click()を実行する前に、ちょっとしたタイムアウトイベントを設定するだけです。

setTimeout(function(){ $('#btn').click()}, 100);
32
Ashish Khurana

これはJQueryの動作です。それがなぜこのように機能するのか私にはわかりません。リンク上のonClick関数を起動するだけです。

試してください：

jQuery(document).ready(function() {
    jQuery('#foo').on('click', function() {
        jQuery('#bar')[0].click();
    });
});
31
Filip Górny

私のデモを見てください。 http://jsfiddle.net/8AVau/1/

jQuery(document).ready(function(){
    jQuery('#foo').on('click', function(){
         jQuery('#bar').simulateClick('click');
    });
});

jQuery.fn.simulateClick = function() {
    return this.each(function() {
        if('createEvent' in document) {
            var doc = this.ownerDocument,
                evt = doc.createEvent('MouseEvents');
            evt.initMouseEvent('click', true, true, doc.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
            this.dispatchEvent(evt);
        } else {
            this.click(); // IE Boss!
        }
    });
}
18
Reza Mamun

役に立つかもしれません：

トリガーを呼び出すコードは、イベントが呼び出されるafterに行く必要があります。

たとえば、#expense_ticketsの値が変更されたとき、およびページがリロードされたときに実行したいコードがいくつかあります。

$(function() { 

  $("#expense_tickets").change(function() {
    // code that I want to be executed when #expense_tickets value is changed, and also, when page is reload
  });

  // now we trigger the change event
  $("#expense_tickets").trigger("change");

})
14
Albert Català

jQueryの.trigger('click');はこのイベントでイベントを発生させるだけで、デフォルトのブラウザアクションも発生させません。

次のJavaScriptで同じ機能をシミュレートできます。

jQuery('#foo').on('click', function(){
    var bar = jQuery('#bar');
    var href = bar.attr('href');
    if(bar.attr("target") === "_blank")
    {
        window.open(href);
    }else{
        window.location = href;
    }
});
4
Alexander O'Mara

これを試してみてください。

$('#bar').mousedown();
2
Henry

技術的にはこれに対する答えではありませんが、受け入れられた答え（ https://stackoverflow.com/a/20928975/82028 ）を使用して作成するjQuery ACFフィールドのタブの次ボタンと前ボタン

$('.next').click(function () {
    $('#primary li.active').next().find('.acf-tab-button')[0].click();
});

$('.prev').click(function () {
    $('#primary li.active').prev().find('.acf-tab-button')[0].click();
});
0
Tisch

私はトップ2の答えを試してみました、私が私のファイル入力要素から "display：none"を削除するまでそれは私のために働きませんでした。それから私は.trigger（）に戻り、それはwindowsのサファリでも機能しました。

結論として、display：noneを使わないでください。ファイル入力を隠すには、代わりにopacity：0を使用します。

0
Himanshu Saini