JQuery custom event in ASP.Net User Control

Question

I have an ASP.Net user control that contains some checkboxes, and I want to use JQuery to raise an event from the user control when one of the checkboxes is clicked. Here is the JQuery code in the user control where I'm trying to raise the event:

         $(document).ready(function() { 
            $(':checkbox').click(function(){
               $('#hfRemainingInstalls').trigger('CheckBoxClicked');
            });
         });

and here is the JQuery code in the containing aspx page where I'm trying to subscribe to the event:

          $(document).ready(function() {
              $("p").bind('CheckBoxClicked', function(e) {    
                 alert("checkbox clicked");       
             });
          });

I'm never seeing my alert when I click on one of the checkboxes. Anyone know what might be the problem here?

Answer 1

so is there a relationship between the Id tags P and Id hfRemainingInstalls

1: Solution

$(':checkbox').click(function(){
    $("p").trigger('CheckBoxClicked');
});

$(document).ready(function() {
  $("p").bind('CheckBoxClicked', function(e) {    
     alert("checkbox clicked");       
  });
});

2: Solution

$(':checkbox').click(function(){
    $("#hfRemainingInstalls").trigger('CheckBoxClicked');
});

$(document).ready(function() {
  $("#hfRemainingInstalls").bind('CheckBoxClicked', function(e) {    
     alert("checkbox clicked");       
  });
});

Answer 2

I am sure you have an ID problem. ASP.NET controls that reside inside of container elements such as UserControls and MasterPages, when rendered, have some junk prefixed to the id attribute to ensure uniqueness. It is usually something like "ctl01_01_YourID" That said, you should probably be using the jQuery endsWith selector...

$('input[id$=hfRemainingInstalls]').trigger('CheckBoxClicked');

The following will alert "true" if the element is found...

alert($('#hfRemainingInstalls').length > 0);