メインjqueryオブジェクトへのアクセスを維持しながら、jqueryプラグイン内にclickイベントを追加する

Question

以下のコードでは、順序付けされていないリストをいくつか持っていて、プラグインでli要素をクリックするとclickイベントを発生させようとしています。どうすればプラグインの中でこれを行い、メインの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タグがクリックされたかに応じて、クリックされたliタグの親ulタグにどのクラスが関連付けられているかの警告が表示されます。

こちらがお役に立てば幸いです。

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