Пользовательское событие JQuery в ASP.Net User Control

Question

У меня есть пользовательский элемент управления ASP.Net, который содержит некоторые флажки, и я хочу использовать JQuery для вызова события из пользовательского элемента управления при нажатии на один из флажков. Вот код JQuery в пользовательском элементе управления, где я пытаюсь вызвать событие:

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

и вот код JQuery на странице aspx, где я пытаюсь подписаться на событие:

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

Я никогда не вижу своего предупреждения, когда нажимаю на один из флажков. Кто-нибудь знает, в чем может быть проблема здесь?

Answer 1

Я уверен, что у вас есть проблемы с идентификацией. Элементы управления ASP.NET, которые находятся внутри элементов контейнера, таких как UserControls и MasterPages, при визуализации имеют некоторый нежелательный префикс к атрибуту id для обеспечения уникальности. Обычно это что-то вроде «ctl01_01_YourID». Тем не менее, вы, вероятно, должны использовать селектор jQuery endWith ...

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

Следующее сообщение выдаст «true», если элемент найден ...

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

Answer 2

поэтому есть связь между тегами Id P и Id hfRemainingInstalls

1: раствор

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

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

2: Решение

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

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