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

在下面的代码中，我有几个无序列表，在插件中，我试图在单击

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

单击此按钮将触发单击事件


单击此按钮将触发单击事件

（函数（$）{
$.fn.myPlugin=函数（选项）{
返回此值。每个（函数（）{
//单击li时，如何触发onClick？？？
});
函数onClick（）{
log（“您单击了一个li”）；
//我还需要访问这里的主要ul元素
}
}
})（jQuery）；
$（函数（）{
$（'.testing'）.myPlugin（）；
});
（函数（$）{
$.fn.myPlugin=函数（选项）{
返回此。查找（'li'）。单击（onClick）
函数onClick（）{
log（“您单击了一个li”）；
$（this.parent（）；//这是

}
}
})（jQuery）；
$（“.testing”）.myPlugin（）
复制以下示例，看看这是否有助于巩固您试图完成的目标

到达主要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>


单击此按钮将触发单击事件


单击此按钮将触发单击事件

$（函数（）{
$（'ul'）
.on（'click'，'li'，function（）{
$（this.myPlugin（）；
});
});
$.fn.myPlugin=函数（选项）{
返回此值。每个（函数（）{
//单击li时，如何触发onClick？？？
onClick（这个）；
});
函数onClick（jqObj）{
log（“您单击了一个li”）；
//我还需要访问这里的主要ul元素
警报（$（jqObj）.parent（'ul'）.attr（'class'））；
}
}

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