jQuery doesn't react on click on added class

Question

I have a rather simple script where I want a div to disappear when jQuery loads, add an "trigger" element on which I can click so that the div appears again. Then the class of the "trigger" is changed and when I click that again, the div should disappear again.. unfortunately the script works fine just until the "trigger" class is changed, if I click it again nothing happens.

QUESTION SOLVED

Here is the working JS:

$(document).ready(function () {
if ($('#Bestellungen #Offene .products')) {
    $('#Bestellungen #Offene .products').hide();
    $('#Bestellungen #Offene .products').before('<div class="trigger"></div>');
    $('#Bestellungen #Offene').on('click', '.trigger', function () {
        $(this).addClass('minus').next().show();
    });
    $('#Bestellungen #Offene').on('click', '.trigger.minus', function () {
        $(this).removeClass('minus').next().hide();
    });
}

});

And here the HTML:

<div id="Bestellungen">
<div id="Offene">
    <table>
        <tr>
            <td>
                <div class="products">blablabla</div>
            <td>
        </tr>
    </table>
</div>

Community · Accepted Answer · 2020-06-20 09:12:55Z

6

In case of, Dynamically added class element you need delegate event. Because, element with dynamic class or id treated as dynamic element with that class or id.

As you're adding the class minus to .trigger later,so, .trigger.minus treating as dynamic element.

So try:

$('#Bestellungen #Offene').on('click', '.trigger.minus', function () {
    $(this).removeClass('minus').next().hide();
});

In order to implement a delegate event you need to use .on() method of jQuery like above.

Note

Syntax of .on() for delegate event is:

$(StaticParentElement).on(eventName, target, handlerFunction);

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 12, 2012 at 16:49

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

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

1 Comment

Sebsemillia Over a year ago

Thx a lot for your quick reply!! I also had to change the click event before the second one to the .on() method, but now it works like a charm! Thank you!

Shmiddty · Accepted Answer · 2012-09-12 16:55:37Z

1

Use the on attachment process.

$(document).ready(function () {
if ($('#Bestellungen #Offene .products')) {
    $('#Bestellungen #Offene .products').hide();
    $('#Bestellungen #Offene .products').before('<div class="trigger"></div>');
    $('#Bestellungen #Offene').on('click', '.trigger:not(.minus)', function () {
        $(this).addClass('minus').next().show();
    });

    /* This is the section that doesn't work */
    $('#Bestellungen #Offene').on('click',  '.trigger.minus', function () {
        $(this).removeClass('minus').next().hide();
    });
}

Also, you'll need to filter out elements that have the .minus class from the first event handler so that they aren't executed when you click on items with the .minus class.

Alternatively, you could write the code like so:

$(document).ready(function () {
if ($('#Bestellungen #Offene .products')) {
    $('#Bestellungen #Offene .products').hide();
    $('#Bestellungen #Offene .products').before('<div class="trigger"></div>');
    $('#Bestellungen #Offene .trigger').click(function () {
        $(this).toggleClass('minus').next().toggle();
    });
}

answered Sep 12, 2012 at 16:55

Shmiddty

13.9k1 gold badge38 silver badges52 bronze badges

1 Comment

Sebsemillia Over a year ago

Thank you for your answer. Especially your alternative answer is very good, because it's less code than my previous solution! :)

Pablo · Accepted Answer · 2012-09-12 17:01:27Z

1

It won't work because you're not attaching the 'minus' handler to the element since it doesn't have the class at the time you try to bind it.
you can use on to attach events to parent elements and then have a selector matching your target, or you can also use a single handler for both cases:

$('#Bestellungen #Offene .trigger').click(function () {
    $(this).toggleClass('minus').next().toggle($(this).hasClass('minus'));
});

This works because toggle function accepts a boolean parameter indicating whether to show or hide the elements.

answered Sep 12, 2012 at 17:01

Pablo

3803 silver badges13 bronze badges

Collectives™ on Stack Overflow

jQuery doesn't react on click on added class

3 Answers 3

Note

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Note

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related