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');
});

デモ：FIDDLE

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

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

注：DOMレベル2 .click()は、Safariの一部の要素では機能しません。回避策を使用する必要があります。

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

次の.click() ようにする前に、小さなタイムアウトイベントを置く必要があります。

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

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

試してください：

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

私のデモを参照してください：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!
        }
    });
}

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

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

たとえば、＃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");

})

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;
    }
});

私のために働くこれを試してください：

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

私は上位2つの回答を試しましたが、ファイル入力要素から「display：none」を削除するまで機能しません。次に、.trigger（）に戻しました。これは、Windowsのサファリでも機能しました。

つまり、display：noneを使用しないでください。ファイル入力を非表示にするには、代わりにopacity：0を使用できます。

技術的にはこれに対する答えではありませんが、受け入れられた答え（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();
});

これを使うだけです：

$(function() {
 $('#watchButton').click();
});

JavaScriptでクリックイベントをシミュレートすることはできません。jQuery .trigger()関数は、要素に対して「クリック」という名前のイベントのみを発生させます。これは、.on()jQueryメソッドでキャプチャできます。