javascript单击事件没有响应

Question

我已经写了一个wordpress插件，在这里我打印主流，当用户单击主流时，它会切换主题属于主流。但是，它适用于前端。

我也想在wordpress后端实现这一点。除了切换功能外，每件东西都能工作。

我已经在wordpress中的管理头文件中包含了jquery。

<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的新手。我不确定在wordpress管理面板中如何处理jquery。有人能给我个提示吗？

部分生成的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在Selector中查找您要针对的元素，如果它不在那里，则处理程序无法附加。.on调用委托这项工作，并允许事件触发以后可能添加的内容。

在这里阅读更多信息：http://api.jquery.com/on/