Question

UPDATE 1:

Am I getting this problem because I am removing .BC1 before the get_firm_summary(); can use it?

ORIGINAL QUESTION:

I’ve started this question over again as it wasn’t structured well and was causing lots of confusion.

Before I get started, I would like to point out that I am using jQuery 1.4

I have a function where I dynamically create a span tag within some HTML where the span tag looks something like this:

<span class='BC1'>some text here</span>

The HTML before .BC1 is inserted looks like this:

<div class="portlet_10">
    <div class="portlet_header_10"></div>
    <div class="portlet_sub_header_10">this is where the span gets inserted</div>
    <div class="portlet_content_10">this is the bit which should get cleared and appended with new data</div>
    <div class="portlet_footer_10"></div>
<div>

And it looks like this after .BC1 is inserted:

<div class="portlet_10">
    <div class="portlet_header_10"></div>
    <div class="portlet_sub_header_10"><span class="BC1">some text here</span></div>
    <div class="portlet_content_10">this is the bit which should get cleared and appended with new data</div>
    <div class="portlet_footer_10"></div>
<div>

I then have a click event for this .BC1 tag:

$('.BC1').live('click', function() {
    alert("clicked");
    $(this).closest('.portlet_10').find('.portlet_sub_header_10').empty();  
    get_firm_summary( $(this) );
});

The alert and finding the closest portlet_sub_header_10 and setting it to empty(); works, as the inserted .BC1 disappears. I am having a problem with the get_firm_summary( $(this) );

The function looks something like this:

function get_firm_summary( that ) {
    $.ajax({
        url: 'get_firm_summary.aspx?rand=' + Math.random(),
        type: 'GET',
        error: function(xhr, status, error) {
            console.log(status);
            console.log(xhr.responseText);
        },
        success: function(results) { 
            console.log( that.attr("class") );
            that.closest('.portlet_10').find('.portlet_content_10').empty().append( results );
        }
    });
}

Here the console.log works fine, but nothing happens to portlet_content_10.

Anyone know why this is happening?

Answer 1

The problem is because before you call get_firm_summary( $(this) ); you are calling empty() on the parent div of the clicked element. This is losing the reference to the element in the DOM, rendering any traversal functions impossible.

Try this:

$('.BC1').live('click', function() {
    get_firm_summary( $(this) );
});

// ajax:
success: function(results) {
    // add new text
    that.closest('.portlet_10').find('.portlet_content_10').empty().append("FOO BAR");

    // remove clicked element
    that.closest('.portlet_10').find('.portlet_sub_header_10').empty();  
}

See this fiddle for a working example