JQuery.trigger nasıl alınır ('tıklayın'); fare tıklaması başlatmak için

JQuery kullanarak bir fare tıklaması simüle anlamak için zor bir zaman yaşıyorum. Birisi bana yanlış yaptığım şey hakkında bilgi verebilir mi?

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

Gösteri: FIDDLE

#fo düğmesine tıkladığımda #bar'da bir tıklamayı simüle etmek istiyorum ancak bunu denediğimde hiçbir şey olmuyor. Ben de denedim jQuery(document).ready(function(){...})ama başarılı olamadım.

JQuery yöntemini kullanmak yerine jQuery('#bar')[0].click(); , gerçek DOM öğesinde (jQuery nesnesinde değil) fare tıklatmasını simüle etmek için kullanmanız gerekir .trigger().

Not: DOM Düzey 2 .click(), Safari'deki bazı öğeler üzerinde çalışmaz . Bir geçici çözüm kullanmanız gerekecektir.

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

Bunu yapmadan önce küçük bir zaman aşımı etkinliği koymanız yeterlidir .click() :

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

Bu JQuery davranışıdır. Neden bu şekilde çalıştığından emin değilim, sadece bağlantıdaki onClick işlevini tetikler.

Deneyin:

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

Demoma bakın: 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!
        }
    });
}

Faydalı olabilir:

Tetikleyiciyi çağıran kod , olay çağrıldıktan sonra gitmelidir .

Örneğin, #expense_tickets değeri değiştirildiğinde ve ayrıca sayfa yeniden yüklendiğinde yürütülmesini istediğim bazı kodlar var

$(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's .trigger('click');yalnızca bir olayın bu olayda tetiklenmesine neden olur, varsayılan tarayıcı eylemini de tetiklemez.

Aşağıdaki JavaScript ile aynı işlevselliği simüle edebilirsiniz:

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

Benim için çalışan şunu deneyin:

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

İlk iki yanıtı denedim, dosya giriş öğelerimden "display: none" kaldırılana kadar benim için çalışmadı. Sonra geri .trigger () döndü de windows için safari çalıştı.

Yani sonuç, display kullanma: none; dosya girişinizi gizlemek için bunun yerine opaklık: 0 kullanabilirsiniz.

Teknik olarak bunun bir cevabı değil , jQuery ACF alanlarındaki sekmeler için sonraki ve önceki düğmeleri oluşturmak için kabul edilen cevabın ( https://stackoverflow.com/a/20928975/82028 ) iyi bir şekilde kullanılması :

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

Sadece şunu kullanın:

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

Javascript ile bir tıklama etkinliğini simüle edemezsiniz. jQuery .trigger()işlevi, öğede yalnızca .on()jQuery yöntemiyle yakalayabileceğiniz "click" adlı bir olay başlatır.