Simulate a click event without clicking using jQuery

Asked

Viewed 26,842 times

2

I have a project here with a problem, I’m close to solving but I need a hand from you!

At Home, we have a button called "Covers" that when clicked should be taken to the Developments page.

On this page, we have a Portfolio-Filter plugin, where in principle all the properties are shown, and if the user click on any category, for example: 1 bedroom, 2 bedrooms ...... roofs, then only the properties of this type stay on the screen with an effect disappearing the others in fadeToggle form().

But the url is not changed by clicking these filters, usually a #Category appears in the url, but in this case no.

I did the following:

  • On the Home Covers button, I call the URL: http://site .with . br? type=covers
  • Then jQuery searches in the url the string "type=covers", this is already ok.
  • Now I need that when this happens, force a click (I don’t know if it’s possible) without the user clicking, in the Covers filter.

Tips??

Follows code:

$(document).ready(function () {
    if(window.location.href.indexOf("?tipo=coberturas") > -1) {
       alert("Opa, encontrou.");
       var filtroCoberturas = $('li a[data-filter*="cobertura"]');
       //Agora aqui preciso fazer a LI selecionada ser clicada automáticamente         
    }
});
javascript jquery wordpress

  • It is possible, as the answer already posted shows. But if you created the button click action yourself, it might be more elegant to do otherwise.

2 answers

5

You can use $.trigger('click')

$(document).ready(function () {
    if(window.location.href.indexOf("?tipo=coberturas") > -1) {
       alert("Opa, encontrou.");
       var filtroCoberturas = $('li a[data-filter*="cobertura"]');
       //executa o evento "click" no elemento 
       filtroCoberturas.trigger('click');
    }
});

  • Or just filtroCoberturas.click()

  • Didn’t work no.. I tried several things here too. From what I’ve seen in the documentation and some Stackoverflow gringo posts... it’s not common to run in a <a> and especially if his href is just '#'. I’m searching here!

  • The Trigger there is not in a a and yes in the li. If the element that responds to the click is the a you need to change the selector there.

  • Andre, I’m sorry, but the dial is there for the a already. I did the tests to see which selector was picking.

  • @James my mistake! I hadn’t noticed. Unless the a has been created afterward of this code to have been executed I see no reason why the click event should not be triggered.

  • @Andréribeiro appreciated the idea of Trigger(). I believe that for browser security reasons the click Trigger a does not work, follows answer just below.

Show 1 more comment

1

It really was through Rigger, but like this:

if(window.location.href.indexOf("?tipo=coberturas") > -1) {

    $(document).on('ready simularClique', function() {
        var filtroCoberturas = $('li a[data-filter*="cobertura"]');
        filtroCoberturas.click();
    });
    // Chama a função de clique através do trigger
    $(document).trigger('simularClique');

}

Couldn’t call the direct click via Rigger().

I was forced to make Trigger call a function.

Browser other questions tagged javascript jquery wordpress

You are not signed in. Login or sign up in order to post.