jquery in bound cfm

Question

Hi,

I have implemented this filter in a table

http://www.coldfusionjedi.com/index.cfm/2007/8/3/Simple-FIlter-as-you-type-ColdFusion-8-Demo

There is also a button in the outputted table that calls a jquery ajax function on click, it just toggles the visibility of the news item. This worked fine until I abstracted the code from the main html page and placed it in the bound cfm.

Does anyone have any idea how to get the jquery working in a bound function?

Thanks,

R.

$("a.toggleVisibility").click(function () { 
  if ($(this).html() == 'Yes') {
    $(this).html('No');     

    $.ajax({
      type: "POST",
      url: "togglevisibility.cfm",
      data: "id=" + $(this).attr('rel')+"&table=events&visible=No",
      success: function(msg){
      }
    });
  }
});  

Answer 1

Try moving the code into the top level page (calling page not the bound page) and changing it to something like:

$("a.toggleVisibility").live('click',function () { 
  if ($(this).html() == 'Yes') {
    $(this).html('No');     

    $.ajax({
      type: "POST",
      url: "togglevisibility.cfm",
      data: "id=" + $(this).attr('rel')+"&table=events&visible=No",
      success: function(msg){
      }
    });
  }
});  

This will bind to any a tags with a class of toggleVisibility no matter when they are added to the DOM and should take care of the issue