CODEWITHSUNDEEP
jqueryclickaddclassremoveclass
Sebsemillia
Sebsemillia

Reputation: 9476

jQuery doesn't react on click on added class

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>

Upvotes: 0

Views: 1207

Answers (3)

Pablo
Pablo

Reputation: 380

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.

Upvotes: 1

thecodeparadox
thecodeparadox

Reputation: 87073

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

Upvotes: 6

Shmiddty
Shmiddty

Reputation: 13967

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

Upvotes: 1

Related Questions