Question

In the below code I have a couple of unordered lists, and in the plugin I am attempting to fire a click event when the li element is clicked. How can I do this inside the plugin and still have access to the main ul jquery object?

See comments in code for further explanation

    <ul class="testing">

        <li>clicking this should fire a click event</li>

    </ul>

   <ul class="testing">

        <li>clicking this should fire a click event</li>

    </ul>


    (function($) {
       $.fn.myPlugin = function(options) {


         return this.each(function() {

            //how should I trigger the onClick when the li is clicked???

         });

          function onClick(){

             console.log('you clicked an li');
             //I also need access to the main ul element inside here
          }

       }
    })(jQuery);



    $(function() {
       $('.testing').myPlugin();
    });

Answer 1

(function($) {
   $.fn.myPlugin = function(options) {
     return this.find('li').click(onClick)
      function onClick(){
         console.log('you clicked an li');           
         $(this).parent(); // This is the <ul>
      }

   }
})(jQuery);

$(".testing").myPlugin()