Question

我有这个HTML：

<div class="item">
    <ul>
        <li><a href="form.php" class="delete">delete</a></li>
    </ul>
</div>

<div class="item">
    <ul>
        <li><a href="form.php" class="delete">delete</a></li>
    </ul>
</div>

<div class="item">
    <ul>
        <li><a href="form.php" class="delete">delete</a></li>
    </ul>
</div>

当您点击delete按钮时，系统会加载一个表单，要求您点击是或否。

当您点击否时，将返回上一个html。

我在下面制作的这个插件中的问题是，你只能点击delete按钮直到两次次，然后ajax无法在第三次时间。

为什么？怎么解决这个问题？

您可以在此link上看到此错误。

jQuery：

$(document).ready(function(){
    $(".delete").delete_string({targetElement:'.item'});
});

(function($){
    // Attach this new method to jQuery
    $.fn.extend({ 
        // This is where you write your plugin's name
        delete_string: function(options) {
            // Set the default values, use comma to separate the settings, example:
            var defaults = {
                targetElement:          '.item-needle',
                targetSlibing:          false
            }

            var options =  $.extend(defaults, options);
            var o = options;

            // When you create the click function you can assign that element to a variable and reference it within:
            var $cm = this.click(function(e){

                // Set the varible.
                var object = $(this);
                var object_path = object.attr('href');
                var object_parent = object.parents('ul');
                var html_parent = object_parent.html();
                var object_superparent = object.parents(o.targetElement);

                var target_element = object.parents(o.targetElement);
                var target_slibing = target_element.next(o.targetSlibing);
                //alert(target_slibing);

                // Load the form.
                object_parent.load( object_path, function(){

                    // Attach click to the no button.
                    $("input[type=button][name=no]",object_parent).click(function(){

                        // Get the html content back.
                        object_parent.html(html_parent);

                        // Attach the delete plugin back in.
                        $($cm.selector,object_parent).delete_string({targetElement:o.targetElement});
                        return false;

                    });
                });
                return false;
            });
        }
    });
})(jQuery);

据我所知，问题来自这条线：

$($cm.selector,object_parent).delete_string({targetElement:o.targetElement});

如果我这样做会好的，

$($cm.selector).delete_string({targetElement:o.targetElement});

但是这会在屏幕上附加delete plugin到所有其他现有删除按钮，不是吗？

Answer 1

为多个元素构建插件时，最好返回$ .each：

(function($){   
    $.fn.delete_string=function(options){
        var defaults={
            targetElement:'.item-needle',
            targetSlibing:false
        },options=$.extend(defaults,options);
        return($(this).each(function(){
            // Build your plug-in here
        }));
    };
})(jQuery);

jQuery插件：无法重新附加插件本身

1 个答案: