jQuery plugin: fails on re-attaching the plugin itself

I have this 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>

When you click on the delete button, a form will be loaded to ask you to click yes or no.

When you click no the previous html will be returned.

The problem in this plugin I made below, is that you only can click the delete button up to two times then the ajax fails to work at the third time.

How come? How can resolve this?

You can see this bug on this link.

The 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);

The problem come from this line as far as I can find out:

$($cm.selector,object_parent).delete_string({targetElement:o.targe开发者_运维知识库tElement});

it would be fine if I just do this,

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

but this will attach the delete plugin to all other existing delete button on the screen, won't it?

---

When building a plug-in for multiple elements, it is always best to return $.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);