0

我正在尝试创建一个插件，但遇到了多个实例的问题。我希望代码只作用于正在使用的实例，但目前，如果我点击一个，它会同时作用于两者。如何编写只作用于我正在交互的实例的插件？下面是我正在谈论的内容的精简示例。

(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>在两个.testdiv 下方。当我单击一个时，console.log('test')会吐出 2 个“测试”。我只希望代码作用于我正在与之交互的实例。

4

1 回答 1

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 小提琴演示。

顺便说一句，containing_element它已经是一个 jQuery 对象（this在函数的范围内，虽然不在jQuery中each()），它不需要重新包装在 jQuery 中，虽然这样做没有害处，但它不必要地昂贵.

于 2013-07-07T23:34:21.247 回答