Làm thế nào để bạn xử lý các sự kiện nhấp chuột bên trong một plugin jQuery?

Question

Bạn xử lý các sự kiện nhấp chuột bên trong một plugin như thế nào? Mô tả đơn giản là tôi muốn có plugin sẽ phát hiện nhấp chuột và sau đó cập nhật phần tử khác.

Ví dụ Cách sử dụng:

$("#some_id").myPlugin("another_id");

Ví dụ Plugin:

(function($){ 

    $.fn.myPlugin=function(update_id){ 

    .click({$(update_id).html("content_upated");}); 

    } 

})(jQuery); 

Tôi không hiểu làm thế nào để mã hóa các sự kiện .click bên trong plugin. Bất kỳ ví dụ nào cũng hữu ích. Cảm ơn.

Answer 1

Bạn nên làm hai việc:

1. Sử dụng this để tham khảo các yếu tố mà plugin của bạn đang được áp dụng
2. Namespace your events, vì vậy họ có thể dễ dàng được cởi ra sau

Hãy thử như sau

(function($){ 

    $.fn.myPlugin = function(update_id) { 

     this.bind("click.myPlugin", function() { 
     $(update_id).html("content_upated"); 
     }); 

    }; 

})(jQuery); 

Bạn nên đọc trang trên jQuery plugin authoring để biết thêm thông tin về cách phát triển chính xác các plugin jQuery. Bạn đang thiếu các chi tiết quan trọng khác như chấp nhận đối tượng đối số.

Answer 2

(function($){ 
    $.fn.myPlugin=function(update_id){ 
     this.click(function(){ $(update_id).html("content_upated"); }); 
    } 
})(jQuery); 

Đảm bảo update_id là bộ chọn hợp lệ.

Answer 3

Bạn sẽ gọi .each() để lặp qua các phần tử được so khớp hoặc bạn có thể đính kèm thông qua phương thức jQuery thông thường.

(function($) 
{ 
    $.fn.myPlugin = function(anotherIdentifier) 
    { 
      // this.click is equivalent to $(identifier).click() 
      this.click(function() 
      { 
       // Thing to do 
      }); 
    }; 
})(jQuery); 

Answer 4

Sử dụng this để truy cập đối tượng mà các plugin đã được gọi vào lúc:

(function($){ 
    $.fn.myPlugin=function(update_id){ 
     this.click(function() { $(update_id).html("content_upated"); }); 
    } 
})(jQuery); 

Lưu ý rằng việc sử dụng của bạn sẽ cần phải bao gồm các selector id trong ví dụ này, hoặc bạn sẽ cần phải bao gồm nó trong nhấp chuột chức năng:

$("#some_id").myPlugin("#another_id"); 

Answer 5

(function($){ 
    $.fn.myPlugin=function(update_id){ 
     this.click(function(){ $(update_id).html("content_upated"); }); 
    } 
})(jQuery); 

Hãy chắc chắn rằng update_id là một chọn hợp lệ.