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

Recommended Answers

Hi paine_today,

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

Thanks,
pikpik

Jump to Post

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');
    });
});
Jump to Post

All 6 Replies

Hi paine_today,

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

Thanks,
pikpik

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.

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

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.

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

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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.20 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.