1

我目前正在研究如何创建 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);

我究竟做错了什么？

4

1 回答 1

3

尝试这个：-

演示

这只是一个指针，您应该更多地了解如何创建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);
               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();

几件事： -

  • 您最终隐藏了该元素，因此它根本不可见。
  • 您正在根据不同的操作动态创建元素，因此仅绑定单击事件是不够的，您需要使用事件委托on()。这样动态创建的元素就可以从其父级委托事件，而不必再次绑定它们。
于 2013-05-03T22:32:01.873 回答