Trigger click event on DOM element

Question

I tried to trigger a click event on an selected DOM element but my code won't work.

You can see my attempt on JSFiddle.

<ul class="list-group">
    <a href="#" class="list-group-item" data-key="32">LG GOLA 8M</a>
    <a href="#" class="list-group-item" data-key="33">LG 5-6M</a>
    <a href="#" class="list-group-item" data-key="34">LP 5-6M</a>
</ul>

$(document).ready(function() {
    // I get the string tr from URL parameters
    var tr = "fix_LG%20GOLA%208M";
    if (tr !== null) {
        var terminrahmen = $('.list-group-item').filter(function() {
            return $(this).text() === decodeURI(tr).substring(4);
        });

        // Trigger click event on .list-group-item
        terminrahmen.click();
    }

    // The function to be executed
    $('.list-group-item').click(function() {
        alert($(this).text());
    });
});

When the DOM was loaded I collect some data from URL parameters and compare the data with DOM elements. This part works fine.

After that I get an element and I would like to trigger an click event. The click event should "execute" a specified function.

Have anyone a good solution for me? Thanks in advance.

It works? I don't know what the question is. The click event gets fired and an alert pops up just fine. — Kodlee Yin
– Kodlee Yin, Commented May 29, 2014 at 17:42
You're trying to trigger the .click() before you've assigned the handler. Naturally that isn't going to work. Assign the handler first so that it's there when you trigger it. jsfiddle.net/azg2R/4 — cookie monster
– cookie monster, Commented May 29, 2014 at 17:45

Venkata Krishna · Accepted Answer · 2014-05-29 17:46:33Z

2

http://jsfiddle.net/azg2R/2/

Put the click event on top in the ready event.. The click event needs to be triggered after registering the event. It was not happening before

$(document).ready(function() {           
    // The function to be executed
    $('.list-group-item').click(function() {
        alert($(this).text());
    });

    // I get the string tr from URL parameters
    var tr = "fix_LG%20GOLA%208M";
    if (tr !== null) {
        var terminrahmen = $('.list-group-item').filter(function() {
            return $(this).text() === decodeURI(tr).substring(4);
        });

        // Trigger click event on .list-group-item
        terminrahmen.click();
    }
});

answered May 29, 2014 at 17:46

Venkata Krishna

15.2k5 gold badges45 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Oleksii Aza · Accepted Answer · 2014-05-29 17:46:27Z

2

The problem is that you are triggering click event before attaching event handler to it. So you just need to move click handler before triggering click and everything would work as you expected:

$(document).ready(function() {
    // The function to be executed
    $('.list-group-item').click(function() {
        alert($(this).text());
    });
    // I get the string tr from URL parameters
    var tr = "fix_LG%20GOLA%208M";
    if (tr !== null) {
        var terminrahmen = $('.list-group-item').filter(function() {
            return $(this).text() === decodeURI(tr).substring(4);
        });

        // Trigger click event on .list-group-item
        terminrahmen.click();
    }

});

JSFiddle

answered May 29, 2014 at 17:46

Oleksii Aza

5,40832 silver badges35 bronze badges

Collectives™ on Stack Overflow

Trigger click event on DOM element

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related