jQuery操作触发一次，但不会触发一次

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

Answer 1

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

Answer 2

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.