Only first jQuery function working properly

[paine_today]

Any idea why only the first "click" works? I am relatively new to jQuery, so it is, in all liklihood, something rather simple. Any help is greatly apprecaited!!

        $(document).ready(function() {
            $("div.arrow").click(function(){
                $('div.active_arrow').text('↵').removeClass().addClass('arrow').parent().find('div.rss_news_link, div.rss_news_link_odd').height('auto');
                $(this).removeClass().addClass('active_arrow');
                $(this).parent().find('div.rss_news_link, div.rss_news_link_odd').height(+100);
                $(this).text("X");
            });
            $("div.active_arrow").click(function(){
                $(this).removeClass().addClass('arrow').parent().find('div.rss_news_link, div.rss_news_link_odd').height('auto');
            });
        });

[pikpik]

Hi paine_today,

Without seeing the related HTML, it might be difficult for others to understand what's going on.

Thanks,
pikpik

[paine_today]

I'll work on getting that together in a sensible format, but for the time being, the first function (lines 1 - 7) work. It is the second one that doesn't work right, as if the delcaration of the function is wrong.

[pixelsoul]

Without seeing the markup my only suggestion, if you're using jquery 1.7 or higher I would try using .on() like this:

$(document).ready(function() {
    $("div.arrow").on('click', function(){
        $('div.active_arrow').text('?').removeClass().addClass('arrow').parent().find('div.rss_news_link, div.rss_news_link_odd').height('auto');
        $(this).removeClass().addClass('active_arrow');
        $(this).parent().find('div.rss_news_link, div.rss_news_link_odd').height(+100);
        $(this).text("X");
    });
    $("div.active_arrow").on('click', function(){
        $(this).removeClass().addClass('arrow').parent().find('div.rss_news_link, div.rss_news_link_odd').height('auto');
    });
});

[JorgeM]

I'm pretty sure that since the active_arrow class is added dynamically, you need to use event delegation to register the event handler. Use the on() method.

[TomH.PG]

To have the listeners re-applied dynamically you would need to attach it using the 'live' method - in your example, the listener for active_arrow is applies on DOMReady - at which point the target element does not exist, and therefore the listener doesn't become active. To make jquery continually attempt to re-apply the listener after it is called, you would use $.live() instead of $.click() [removed since jQuery 1.9 > http://api.jquery.com/live/ ] - or you can use event delegation (recommended method) ie. attaching the listener to a parent element and specify and 'filter' of sorts to catch events that bubble up from a child element.

Event Delegation:

$('.arrow').parent().on('click', '.active_arrow', function() {
    $('.active_arrow').removeClass().addClass('arrow').parent().find('div.rss_news_link, div.rss_news_link_odd').height('auto');
});

[paine_today]

Thanks for all the feedback!
I have tried each of your implementations, and I still cannot seem to get the second action working. I have changed the code to use the on() method, but still, only the first action seems to work. Here is the current code I am working with:

$(document).ready(function() {
    $(".arrow").on('click', function(){
        $('.active_arrow').text('↵').removeClass().addClass('arrow').parent().find('div.rss_news_link, div.rss_news_link_odd').height('auto');
        $(this).removeClass().addClass('active_arrow');
        $(this).parent().find('div.rss_news_link, div.rss_news_link_odd').height(+100);
        $(this).text("X");
    });
    $(".active_arrow").on('click', function(){
        $(this).removeClass().addClass('arrow').parent().find('div.rss_news_link, div.rss_news_link_odd').height('auto');
        $(this).text("X");
    });
});

And for those asking, this is an example of a line where the code would be activated.

    <div>
        <div class="arrow" style="width:15px; margin:3px; font-color: #FFF; border:1px solid #000; height:16px; float:right">↵</div>
        <a style="display:block" href="r.php?url=xxxxxx" target="_blank">
            <div class="rss_news_link">Al Qaeda Asserts Responsibility for Iraqi Prison Breaks</div>
        </a>
    </div>