jquery actions firing once, but not again

Question

forgive the code being bulkier than necessary, will tidy it up in due course.

everything seems to be working and yet, when you click a link after it's content has already been 'active' nothing happens.

i'm sure it's something simple but i can't see it.

EDIT: the following code now works in FF and Chrome, but does not work in IE8. Any ideas?

$(function(){
            //initialize active link to not have a link on ready.
            var linkId = $('#pricing_body div.active').attr('id');
            var activeLink = $('#pricing_nav ul li#'+linkId+' a'); //just the link itself.
            activeLink.parent().addClass('activeSection');
            //var activeLinkContents = activeLink.parent().html(); //the link contained in the the list item and it's contents.
            //alert(activeLinkContents);
            var linkContents = activeLink.html(); //text content of the link.
            activeLink.parent().html(linkContents);

            //when link is clicked, store it's text for assignment after <a> is stripped out.
            $('#pricing_nav ul li a').live('click',function(){
                var clickedId = $(this).parent().attr('id');
                var clickedLinkContents = $(this).html();
                $(this).parent().addClass('activeSection');
                $(this).parent().html(clickedLinkContents); //replaces <a><span>name</span></a> with just the span and text.

                //fadeOut active div and give it inactive class. get list item with same id as div we are fading out.
                $('#pricing_body div.active').fadeOut('500',function(){
                    $(this).removeClass('active').addClass('inactive');
                    var divId = $(this).attr('id');
                    var sisterLink = $('#pricing_nav ul li#'+divId);
                    sisterLink.removeClass('activeSection');
                    sisterLink.html('<a href="#">'+sisterLink.html()+'</a>'); //put link in between <li>.

                    //fadeIn the div with id of the link that has been clicked.
                    $('#pricing_body div#'+clickedId).fadeIn('500',function(){
                        $(this).addClass('active').removeClass('inactive');
                        var newActive = $('#pricing_nav ul li#'+clickedId);
                    });
                });
            });
        });

This is a dupe of other questions, basically you need to rebind after recreating the element or use .live() — Jason Goemaat, Sep 23 '10 at 19:50
thanks very much. i opted for .live(). am i right in thinking .live() binds the event for all future incarnations of the element but .bind() just does it once on page load, in effect, the same as .click()? — Alex B, Sep 23 '10 at 20:49

score 1 · Answer 1 · answered Sep 23 '10 at 19:51

1

Use live method to attach events to the elements. Here is the documentation.

answered Sep 23 '10 at 19:51

Teja Kantamneni

17,402
12
56
86

score 0 · Answer 2 · edited May 23 '17 at 09:57

0

Try:

$('#pricing_nav ul li a').live('click', function(){

---------
---------
---------

});

EDIT:

In reply of comment.

.live()

The .live() method is able to affect elements that have not yet been added to the DOM through the use of event delegation: a handler bound to an ancestor element is responsible for events that are triggered on its descendants.

.bind()

The .bind() method is the primary means of attaching behavior to a document. All JavaScript event types, such as focus, mouseover, and resize, are allowed for eventType.

Here is SO Question on this difference.

edited May 23 '17 at 09:57

Community

1
1

answered Sep 23 '10 at 19:56

Naveed

41,517
32
98
131

thanks. i used .live instead of .click and now it works. i also tested out .bind but this doesn't work. is the difference that live() binds the event to the element even when they are recreated, and bind() just assigns the event once? – Alex B Sep 23 '10 at 20:47

jquery actions firing once, but not again

2 Answers2