CODEWITHSUNDEEP
javascriptjquerywordpress
wordpressm
wordpressm

Reputation: 3267

javascript click event doesnt respond

I have written a wordpress plugin where I print main stream and when a user click main stream, it toggles the subjects belong to main stream. However, it works for the front end.

I wanted to implemnt this in wordpress backend also. Every thing works except the toggle function.

I have included jquery in admin-header file in 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>

I try to debug with firbug,though when I click the mainstream, it doesn't go in to $(".main_stream").click(function(). Nothing is changed.

Have I missed anything, I am new to wordpress. I am not sure how jquery is handle in wordpress admin panel. Can anybody give me a hint?

part of generated 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>

Upvotes: 0

Views: 85

Answers (2)

wordpressm
wordpressm

Reputation: 3267

when I add the javascript to generate fro backend, problem was solved. I am not sure why javascript in header is discarded before.

Upvotes: 0

ActiveDan
ActiveDan

Reputation: 349

I can't be sure but it sounds like the class isn't present when the event handler for the click is registered, even though you've wrapped it within a doc.ready block. You can try changing the handler signature from a .click to .on, while targeting the input's parent element in the original selector, and the main_stream class in the handler:

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

The .click looks for the element you're targeting in the Selector, if it's not there then the handler can't attach. The .on call delegates this work, and allows events to fire for things that might be added later.

Read more here: http://api.jquery.com/on/

Upvotes: 1

Related Questions