calling an jquery function from within a div / ajax call

calling an jquery function from within a div / ajax call


Hey guys,
Ok. Basically, the situation i am in is this.
Ive got a php page with one side loading data from the database and
the other side which holds a div that is generated when the page
loads.
Looks something like this:
<table>
    <tr>
        <td width="50%" valign="top">
            <!-- data from db here -->
        </td>
        <td valign="top"><div id="cast_social_network"></div></td>
    </tr>
</table>
As the age loads ive got the jquery code load function to execute the
php page with a parameter which displays within the
cast_social_network:
$(document).ready(function()
    {
        $(".btnExternalNetwork").click(saveExternalNetworkURLToCast); //
reference from cast_external_networks.php
        $.post('cast_external_networks.php',
            {
                cast_id: 4                    }, function(txt)
            {
             $('div#cast_social_network').html(txt);
            }
        );
    }
    );
This all works fine so far.
What then displays to the browser within the div is:
<table width="450" border=0>
<tr>
<td class="td_header" width="20%">Social Network</td>
<td class="td_header" width="70%">URL</td>
<td align="center"></td>
</tr>
<tr bgcolor="#8B8A8E">
<td class="td_title">Bebo</td>
<td><input type="text" name="url" id="url" value="" style="width:
300px;"></td>
<td class="ajax" cast_id="4" external_network_id="2" action="add"
align="center"><a href="javascript:;" class="btnExternalNetwork"
onclick="javascript: saveExternalNetworkURLToCast();"><img src="images/
add.gif" border=0></a></td>
</tr>
</table>
The problem i have got now is that, when the function
saveExternalNetworkURLToCast is called, (referenced above in the
jquery script), i need to reference some of the attbutes such as the
cast_id, action.
Ive got this within my js function that i created but when i try to
reference an element, its all undefined.
var $parent = $(this).parents('.ajax');
var cast_id = $parent.attr('cast_id');
var external_network_id = $parent.attr('external_network_id');
var action = $parent.attr('action');
var url = $
(this).parent().parent().children("td").children("input").val();
$(this).parent().children().load('cast_external_networks.php',
    {
     url: url, cast_id: cast_id, external_network_id:
external_network_id, action: action
    },
    function(response)
    {
        if(action == "delete")
        {
            $parent.attr('action', 'add');
            $(this).parent().parent().children("td").children("input").val('');
        }
        if(action == "add")
        {
            $parent.attr('action', 'delete');
        }
    }
);
Im guessing im getting the undefined values as its within the div that
i am calling that function rather then from the 'parent' page, if that
makes sense.
Can someone point me in the right direction or explain where i am
going wrong please?
Thanks
Raj Gorsia