jQuery 插件、范围和将创建的元素绑定到“更改”事件

Question

所以，我正在编写我的第一个插件。我使用的是advice on the jQuery website，所以我的插件设置如下所示：

(function( $ ){

  var methods = {
    init : function( options ) {
      var $this = $(this);
      // do some code.

      // Add an element
      $this.append('<select id="test"><option value="yes">Yes</option>' +
                   '<option value="no">No</option></select>');

      // Bind the change handler (chose '.on' after reading the documentation for '.delegate')
      $this.on('change', '#test', methods['handler'].call($this, $('#test').val()));

    },
    handler : function( content ) { 
      alert ('You chose: ' + content);
    }
  };

  $.fn.testbed = function( method ) {

    // Method calling logic
    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 + ' does not exist' );
    }    

  };

})( jQuery );

我知道处理程序本身正在工作，因为我可以替代

function(){ alert ("You did it!");} 

对于函数调用，它可以工作。

但是，我现在调用函数的方式不起作用。这是我从其他方法中调用其他函数的方式，但它不适用于处理程序。

所以，我的问题是：（1）我如何让它调用函数？ (2) 这是设置处理程序的最佳位置吗？

Answer 1

一个 id 在页面中应该是唯一的。拥有多个具有相同 id 的元素会给你一个与你尝试访问它时所想的不同的元素。完全不要使用 id，在回调中使用this 来获取正确的元素。

当您为每个事件创建一个委托时，没有理由创建一个委托。直接在select元素上绑定事件。

事件的处理程序应该是一个函数，而不是函数调用的结果。

init : function( options ) {

  // Add an element
  this.append('<select><option value="yes">Yes</option>' +
               '<option value="no">No</option></select>');

  // Bind the change handler
  $('select', this).on('change', function() {
    methods['handler']($(this).val());
  });

},