javascript click event doesnt respond

Question

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>

Why are you including two version of jQuery .Keep only one of them — Tushar Gupta - curioustushar
– Tushar Gupta - curioustushar, Commented Nov 21, 2013 at 14:21
I removed <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> — wordpressm
– wordpressm, Commented Nov 21, 2013 at 14:23
yes, from the back end php code generate .mainstream class for each main stream. — wordpressm
– wordpressm, Commented Nov 21, 2013 at 14:27

ActiveDan · Accepted Answer · 2013-11-22 06:14:15Z

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/

wordpressm · Accepted Answer · 2013-11-22 11:31:05Z

0

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

answered Nov 22, 2013 at 11:31

community wiki

wordpressm

Collectives™ on Stack Overflow

javascript click event doesnt respond

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related