的Javascript初始化变量，从

Question

我已经插件建设像这样的活动：

(function($){ 
 
    
 
     var defaults = { 
 
      param1:null, 
 
      param2:null 
 
     }; 
 
    
 
     var methods = { 
 
      init:function(params) { 
 
    
 
       var options = $.extend({}, defaults, params); 
 
    
 
       $(this).append('<button class="addbtn">Add elements</button>'); 
 
    
 
       $(document).on('click','.addbtn',function(){ 
 
        $('body').append(button.html+input.html); 
 
       }); 
 
    
 
    
 
      } 
 
     }; 
 
    
 
     var button = { 
 
      html: '<button class="btn">Button</button>' 
 
     }; 
 
    
 
     var input = { 
 
      html: '<input type="text" class="input" value="" />' 
 
     }; 
 
    
 
     var actions ={ 
 
      clicked:function(){ 
 
       alert('clicked'); 
 
      }, 
 
      hover:function(){ 
 
       alert('hover'); 
 
      } 
 
     }; 
 
    
 
     $.fn.JPlugin = function(method){ 
 
      if (methods[method]) { 
 
       return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1)); 
 
      } else if (typeof method === 'object' || ! method) { 
 
       return methods.init.apply(this, arguments); 
 
      } else { 
 
       $.error('Method"' + method + '" is not found jQuery.mySimplePlugin'); 
 
      } 
 
     }; 
 
    })(jQuery); 
 
    $('body').JPlugin();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

通过点击添加按钮，你会从input.html和按钮从button.html添加输入。我如何初始化输入元素和按钮对象的单击事件从actions.clicked和悬停事件从actions.hover

Answer 1

你可以定义事件时附加按钮和input.Try下面的代码，我希望这有帮助。

(function($){ 
 
    
 
     var defaults = { 
 
      param1:null, 
 
      param2:null 
 
     }; 
 
    
 
     var methods = { 
 
      init:function(params) { 
 
    
 
       var options = $.extend({}, defaults, params); 
 
    
 
       $(this).append('<button class="addbtn">Add elements</button>'); 
 
    
 
       $(document).on('click','.addbtn',function(){ 
 
        $('body').append(button.html+input.html) 
 
         .find(".foo") 
 
         .click(function(){actions.clicked($(this))}) 
 
         .hover(function(){actions.hover($(this))}) 
 
       }); 
 
    
 
       
 
      } 
 
     }; 
 
    
 
     var button = { 
 
      html: '<button class="btn foo">Button</button>' 
 
     }; 
 
    
 
     var input = { 
 
      html: '<input type="text" class="input foo" value="" />' 
 
     }; 
 
    
 
     var actions ={ 
 
      clicked:function($this){ 
 
       console.log($this); 
 
      }, 
 
      hover:function($this){ 
 
       console.log($this); 
 
      } 
 
     }; 
 
    
 
     $.fn.JPlugin = function(method){ 
 
      if (methods[method]) { 
 
       return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1)); 
 
      } else if (typeof method === 'object' || ! method) { 
 
       return methods.init.apply(this, arguments); 
 
      } else { 
 
       $.error('Method"' + method + '" is not found jQuery.mySimplePlugin'); 
 
      } 
 
     }; 
 
    })(jQuery); 
 
    $('body').JPlugin();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>