Добавление события click внутри плагина 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()

Answer 2

Скопируйте следующий пример и посмотрите, поможет ли это закрепить то, что вы пытаетесь выполнить.

Доказательством попадания на основные теги ul являются оповещения. Вы увидите, что я создал классы 'testing1' и 'testing2'. В зависимости от того, какой тег li нажат, пользователь получит предупреждение о том, какой класс связан с родительским тегом ul тега li, по которому щелкнули.

Надеюсь, это поможет!

<ul class="testing1">

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

</ul>

<ul class="testing2">

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

</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $('ul')
    .on('click', 'li', function() {
        $(this).myPlugin();
    });
});
$.fn.myPlugin = function(options) {
    return this.each(function() {
        //how should I trigger the onClick when the li is clicked???
        onClick(this);
    });
    function onClick(jqObj) {
        console.log('you clicked an li');
        //I also need access to the main ul element inside here
        alert($(jqObj).parent('ul').attr('class'));
    }
}
</script>