Question

我正在尝试创建一个插件，但是我遇到了多个实例的问题。我希望代码只对正在使用的实例起作用，但是目前，如果我点击一个，它会同时作用于两者。如何编写仅对我正在与之交互的实例执行操作的插件？下面是我正在谈论的一个简短的样本。

(function( $ ) {
    $.fn.cals = function(options) {
    var containing_element = this;


        var opts = $.extend( {}, options);

        // create a container after each element
        $(containing_element).after('<div class="container">Click</div>');

        return this.each(function() { 
             $('.container').on('click', function() { 
                  console.log('test')
             })
        }); // END this.each
    };
})( jQuery );

html代码是：

<script>
    $(document).ready(function() {
        $('.test').cals();
    });
</script>

    <div class="test" type="text">
    <div class="test" type="text">

</html>

代码在<div class="container>Click</div>个div下面插入.test。当我点击一个时，console.log('test')吐出2“测试”。我只希望代码对我正在与之交互的实例起作用。

Answer 1

我建议修改你的插件语法，在each()循环中附加新元素（在这种情况下是先前定义的元素的克隆）：

(function ($) {
    $.fn.cals = function (options) {
        var containing_element = this;
        var opts = $.extend({}, options);

        // create containing element for calendar
        var container = $('<div />', {
            'class' : 'container',
            'text' : 'click',
            'click' : function(){
                console.log('test');
            }
        });

        return this.each(function () {
            $(this).after(container.clone(true, true));
        }); // END this.each
    };
})(jQuery);

JS Fiddle demo

顺便说一下，containing_element 已经一个jQuery对象（就像函数范围内的this一样，尽管不是在{ {1}}），它不需要在jQuery中重新包装，虽然这样做没有坏处，但它不必要地昂贵。

jQuery插件：仅在所执行的元素上触发事件

1 个答案: