Javascript initialisieren Ereignisse aus Variable

Question

i Bau Plugin wie folgt aus:

(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>

auf Schaltfläche Hinzufügen Durch Klicken Sie Eingabe von input.html und Knopf aus button.html hinzufügen. Wie kann ich Click-Ereignis für Eingabeelement und Schaltfläche Objekte von actions.clicked und Hover-Ereignis von actions.hover

Answer 1

Sie können Ereignisse definieren, wenn Schaltfläche und Eingabe anhängen. Versuchen Sie folgenden Code hoffe ich hoffe dies hilfreich.

(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>