javascript click event does not отвечает

Question

Я написал плагин wordpress, где я печатаю основной поток, и когда пользователь нажимает основной поток, он переключает объекты, принадлежащие основному потоку. Однако он работает для передней части.

Я хотел бы реализовать это в бэкэнде Wordpress. Все работает, кроме функции переключения.

Я включил jquery в файл заголовка администратора в wordpress.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 


<script type="text/javascript"> 
    $(document).ready(function() { 
     // dynamically handlling main streams and their subjects 
     // when a main stream is selected, it is sub categories(subjects) div will 
     // be toggle. 
     //  alert(subClicked); 
     $(".main_stream").click(function() { 
      var subClicked = $(this).attr('id'); 
      // $(".stream").hide(); 
    //     alert(subClicked); 
         console.log("value is "+subClicked); 
      $("#" + subClicked + "sub").toggle(); 
     }); 
    }); 
</script> 

Я пытаюсь отлаживать с firbug, хотя, когда я нажимаю на мейнстрим, не идти к $(".main_stream").click(function(). Ничего не изменилось.

Я что-то пропустил, я новичок в Wordpress. Я не уверен, как jquery обрабатывается в панели администратора wordpress. Может ли кто-нибудь дать мне подсказку?

часть генерироваться Html

<div id="Statisticssub" class="hide" "="" style="padding-left: 20px;"> 
<input type="checkbox" id="Technology_Solutions" value="" class="main_stream" checked="checked"/> 
Technology Solutions 
<br/> 
<div id="Technology_Solutionssub" class="hide" style="display: block;" "=""> 
<div style="width: 350px; height: 30px; padding-top: 5px;"> 
<div style="width: 350px; height: 20px; padding-top: 5px;"> 
<div style="width: 260px; float: left; padding-top: 5px;"> 
<input type="checkbox" id="16" name="check_subjects[]"/> 
C# 
</div> 
<div style="width: 75px; height: 10px; float: left; padding-right: 15px;"> 
</div> 
<div style="width: 350px; height: 20px; padding-top: 5px;"> 
<div style="width: 260px; float: left; padding-top: 5px;"> 
<div style="width: 75px; height: 10px; float: left; padding-right: 15px;"> 
</div> 

Answer 1

, когда я добавить JavaScript для создания Фро бэкенд, проблема была решена. Я не уверен, почему javascript в заголовке отбрасывается раньше.

Answer 2

Я не могу быть уверен, но это звучит как класс не присутствует, когда обработчик событий для мыши зарегистрирован, даже если вы завернул его в пределах блок doc.ready. Вы можете попытаться изменить подпись обработчика от .click к .on, в то время как ориентациям на вход родительского элемента в исходном селекторе, а класс main_stream в обработчике:

$("#Statisticssub").on('click', '.main_stream', function() { 
      var subClicked = $(this).attr('id'); 
      // $(".stream").hide(); 
    //     alert(subClicked); 
         console.log("value is "+subClicked); 
      $("#" + subClicked + "sub").toggle(); 
     }); 

.click ищет элемент вы таргетирование в Селектор, если его нет, обработчик не может подключиться. Вызов .on делегирует эту работу и позволяет событиям срабатывать для вещей, которые могут быть добавлены позже.

Подробнее здесь: http://api.jquery.com/on/