Your click handler only applies to the elements matching
".ajax_homes_primary_img" at the time the click() function is called.
When you replace it, the new element has no event listeners attached.
You can either rebind the event every time you modify it, or use the
'live' function, which uses event delegation: http://docs.jquery.com/Events/live
That's as simple as changing $(".ajax_homes_primary_img").click
(function(){ to $(".ajax_homes_primary_img").live('click', function()
{...
cheers,
- ricardo
On Mar 28, 10:32 am, "Mr.Zeph" <mr.z...@gmail.com> wrote:
> Hi,
>
> I'm brand new to jQuery, and so far I love it! I don't know ajax from
> a cumquat and yet, here I am ajaxing around merrily, even if clumsily.
> I've run into a situation where I have a grid of images, one which is
> to be the default, or the main image. When I click the radio button,
> it correctly triggers, retrieves a page, server side that does the
> database update (correctly), then deletes the current contents of a
> tbody, and sucks in a new one (pure HTML, no json, or xml, or
> whatever). By all appearances it loads correctly, but for some reason,
> selecting another radio button fails to trigger the .click() function,
> I've tested this by using a simple alert(). I've gone through the
> archives here, and I can't discern much from the docs, but maybe I'm
> missing some key concepts that would have helped me fine tune my
> search.
>
> Is there something that I might be missing? All code (yes! that's ALL
> of it! I love jQuery!) is included below and suggestions are highly
> appreciated.
>
> // User clicked the "make primary image" radio button
> $(".ajax_homes_primary_img").click(function() {
> //$(".ajax_homes_primary_img");
>
> // Get and keep the table the same height so that it doesn't collapse
> on reload
> var tblHeight = $('#homes_image_grid > tbody').height();
> $('#homes_image_grid').css('height', tblHeight);
>
> // Retrieve the value of the primary_image radio button, and the
> property record's ID
> var img_id = $(this).val();
> var prop_id = $('#property_id_field').val();
>
> // Hide the current records (just looks cool)
> var tblRows = $('#homes_image_grid > tbody > tr');
> tblRows.fadeOut('slow');
>
> // Let's update the database table with the value of the radio button
> $.ajax({
> url: '/homes/admin/index.cfm?
> fuseaction=ajax_property_images_update&property_id='+ prop_id
> +'&image_id=' + img_id,
> cache: false,
> success: function(html){
>
> // Clear the tbody out so as to not confuse with
> element IDs
> tblRows.remove();
> }
> });
>
> // Now let's fetch the new data and append it to the tbody we just
> cleared out.
> $.ajax({
> url: '/homes/admin/index.cfm?
> fuseaction=ajax_property_images_get&property_id=' + prop_id,
> cache: false,
> success: function(html){
> $("#homes_image_grid > tbody").append(html);
> }
> });
>
> });
