Jquery element replace problem

Question

First I'm not sure this is the place to ask this question if not please direct it to its proper place.

The problem I am having is that I can get the first click function to work and have the html element change but I can't get the second click function to work and have the element change back. I was wondering how can I fix this problem?

Here is the code.

$(document).ready(function() {
    $('.arrow').click(function(){
        $(this).closest('li').find('ol:first').fadeToggle('fast', 'linear');
        $(this).html('<span class="arrow-alt">&#8595;</span>');
    });

    $('.arrow-alt').click(function(){
        $(this).closest('li').find('ol:first').fadeToggle('fast', 'linear');
        $(this).html('<span class="arrow">&#8594;</span>');
    }); 

});

See: .on() and .delegate().

Jared Farrish
– Jared Farrish

2012-01-15 22:56:41 +00:00
Commented Jan 15, 2012 at 22:56 — Jared Farrish
– Jared Farrish, Commented Jan 15, 2012 at 22:56

JMax · Accepted Answer · 2012-01-16 10:49:40Z

1

As pointed out by Jared, when you are using a .click() event, it will work on the existing parts of the DOM.

When you are dynamically adding elements to the DOM and want to attach events to them, you have to use dynamic events like .on() if you are using jquery 1.7 or higher or .delegate() for previous versions.

Please no longer use the .live() method because it was deprecated on the 1.7 version of jquery.

answered Jan 16, 2012 at 10:49

JMax

26.7k12 gold badges74 silver badges89 bronze badges

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

Comments

Olav · Accepted Answer · 2012-01-16 23:16:22Z

<ol>
    <span class="arrow">&#8594;</span>
</ol>

Note that if your html looks like the above markup, your code will produce a second span inside your first span instead of replacing the span. You can avoid this by changing the string parameter in the html function and for example use removeClass and addClass.

I think what you are looking for is something like this (ref use of on or delegate mentioned by JMax)

$(document).ready(function () {
    $('ol').on('click', '.arrow', function(event){
        $(this).closest('li').find('ol:first').fadeToggle('fast', 'linear');
        $(this).html('&#8595;');
        $(this).removeClass('arrow');
        $(this).addClass('arrow-alt');
    });

    $('ol').on('click', '.arrow-alt', function(event){
        $(this).closest('li').find('ol:first').fadeToggle('fast', 'linear');
        $(this).html('&#8594;');
        $(this).removeClass('arrow-alt');
        $(this).addClass('arrow');
    }); 
});

Collectives™ on Stack Overflow

Jquery element replace problem

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