javascript - 在 jquery 插件中添加点击事件，同时保持对主 jquery 对象的访问

Question

在下面的代码中，我有几个无序列表，在插件中，我尝试在单击 li 元素时触发单击事件。如何在插件内执行此操作并仍然可以访问主 ul jquery 对象？

请参阅代码中的注释以获取进一步说明

    <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()