Come ottenere JQuery.trigger ('click'); per avviare un clic del mouse

Sto facendo fatica a capire come simulare un clic del mouse usando JQuery. Qualcuno può informarmi su cosa sto facendo di sbagliato.

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

Demo: FIDDLE

quando faccio clic sul pulsante #foo voglio simulare un clic su #bar, tuttavia quando provo questo, non succede nulla. Ho anche provato, jQuery(document).ready(function(){...})ma senza successo.

È necessario utilizzare jQuery('#bar')[0].click(); per simulare un clic del mouse sull'elemento DOM effettivo (non sull'oggetto jQuery), anziché utilizzare il .trigger()metodo jQuery.

Nota: DOM Level 2 .click()non funziona su alcuni elementi in Safari . Sarà necessario utilizzare una soluzione alternativa.

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

Devi solo mettere un piccolo evento di timeout prima di fare .click() così:

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

Questo è il comportamento di JQuery. Non sono sicuro del perché funzioni in questo modo, innesca solo la funzione onClick sul link.

Provare:

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

Guarda la mia demo: 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!
        }
    });
}

Può essere utile:

Il codice che chiama il trigger dovrebbe andare dopo la chiamata dell'evento.

Ad esempio, ho del codice che voglio eseguire quando il valore #expense_tickets viene modificato, e anche quando la pagina viene ricaricata

$(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');provoca l'attivazione di un evento solo su questo evento, ma non attiva anche l'azione predefinita del browser.

Puoi simulare la stessa funzionalità con il seguente 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;
    }
});

Prova questo che funziona per me:

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

Ho provato le prime due risposte, non ha funzionato per me fino a quando non ho rimosso "display: none" dai miei elementi di input del file. Poi sono tornato a .trigger () ha funzionato anche su Safari per Windows.

Quindi conclusione, non usare display: none; per nascondere l'input del tuo file , puoi usare invece l'opacity: 0.

Tecnicamente non è una risposta a questo, ma un buon uso della risposta accettata ( https://stackoverflow.com/a/20928975/82028 ) per creare pulsanti next e prev per le schede nei campi ACF jQuery:

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

Usa questo:

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

Non puoi simulare un evento click con javascript. La .trigger()funzione jQuery genera solo un evento chiamato "click" sull'elemento, che puoi catturare con il .on()metodo jQuery.