Question

我目前正在研究如何创建jQuery插件，并在下面创建了代码。我添加了自己的功能，并在为我的插件添加默认值后扩展了选项，但没有发生任何事情。我甚至添加了警报 - 但它也没有显示。

到目前为止，这是我的代码：

(function($){  

    // Extend the Jquery Object with the Myedit Function
    jQuery.fn.Myedit = function(options) {  

        // Default options
        var defaults = {  
            width: 250,  
            height: 20,  
            url: "",  
            data: {},  
            buttons: false  
        };

        // Extend the options with the onse the user provided
        var options = $.extend(defaults, options);  

        return this.each(function() {  
            var object = $(this);

            $(object).live('click', function () {
                var input = $('<input />', {'type': 'text', 'name': $(this).attr('name'), 'value': $(this).html()});
                $(this).parent().append(input);
                $(this).remove();
                input.focus();
            });

            $(object).live('blur', function () {
                $(this).parent().append($('<span />').html($(this).val()));
                $(this).remove();
            });
            $(this).hide();
        });  
    };  
    //return alert(object);
})(jQuery);

我做错了什么？

Answer 1

试试这个： -

<强> Demo

这只是一个指针，您应该更多地了解如何创建jquery plugin。

(function($){  

     // Extend the Jquery Object with the Myedit Function
     jQuery.fn.Myedit = function(options) {  

          // Default options
          var defaults = {  
               width: 250,  
               height: 20,  
               url: "",  
               data: {},  
               buttons: false  
          };

          // Extend the options with the onse the user provided
          var options = $.extend(defaults, options);  

           return this.each(function() {  

            var object = $(this);
               var span = 'span[name=' + object.attr('name') + ']';
               var input = 'input[name=' + object.attr('name') + ']';

            $(document).on('click',span ,function () {
                var input = $('<input />', {'type': 'text', 'name': $(this).attr('name'), 'value': $(this).html()});
                $(this).parent().append(input);
                $(this).remove();
                input.focus();
            });

            $(document).on('blur',input, function () {
                $(this).parent().append($('<span />',{name:object.attr('name')}).html($(this).val()));
                $(this).remove();
            });

          });  
     };  
     //return alert(object);
})(jQuery);
$('span').Myedit();

一些事情： -

你最后隐藏了元素，所以它根本不可见。
您正在动态创建不同操作的元素，因此仅绑定click事件是不够的，您需要使用on()使用事件委派。这样动态创建的元素就会从其父级委托事件，而不必再次绑定它们。

我的jQuery插件的语法有什么问题？

1 个答案: