Событие щелчка, подавленное Jquery Accordian

#jquery #jquery-ui #jquery-plugins

#jquery #jquery-пользовательский интерфейс #jquery-плагины

Вопрос:

Ребята, у меня есть панель accordian, которая содержит флажок в своем заголовке :

  <div id="accordion">
   <h3><a href="#"><input type='checkbox' id='chkbox'/>First header</a></h3>
   <div>First content</div>
    <h3><a href="#">Second header</a></h3>
   <div>Second content</div>
</div>
  

теперь, когда я нажимаю на флажок, событие щелчка подавляется jquery с помощью event.preventDefault. Следовательно, я не могу изменить состояние флажка. Я попробовал следующий трюк, но безуспешно:

 $("#accordion").accordion();

$('#chkbox').live('click',function(){
   var checkbox = $(this).find(':checkbox');
   checkbox.attr('checked', !checkbox.attr('checked'));

});
  

Пожалуйста, помогите!!
смотрите код http://jsfiddle.net/teBfb/1/
Спасибо

Ответ №1:

Что вы делаете с

 .attr('checked', !$checkbox.attr('checked'));
  

должно сработать. Это означает, что ваш селектор поврежден. Есть ли причина, по которой вы используете знаки $ в именах переменных? Это может сбить с толку jQuery.

Ответ №2:

Вы могли бы использовать stopPropagation, чтобы событие щелчка флажка не поднималось по цепочке.

 $("#accordion h3 input").click(function(e) { 
    e.stopPropagation(); 
}); 
  

http://jsfiddle.net/teBfb/6/

Комментарии:

1. Извините, я забыл обновить jsfiddle с моим изменением. Попробуйте новое в моем сообщении.

2. Извините, @flynfish, ваше решение работает с событием щелчка. но я должен использовать live, так как все мои флажки создаются на лету. live (‘click’, функция …) не работает…

Ответ №3:

    $(function () {
        $("#accordion").accordion({
            collapsible: true,


        });
    });



    $("#accordion h3 input").click(function (e) {

        var checkedStatus = $(this).prop('checked');
        e.stopPropagation();
         if (checkedStatus) {


           $("#accordion div div").slideUp();

            $(this).parent().next().slideDown();
         }
        else {


             $("#accordion div div").slideDown();

             $(this).parent().next().slideUp();

       }


    });
  

попробуйте это