Thêm jQuery chức năng đến các yếu tố cụ thể

Question

Tôi biết rằng bạn có thể thêm chức năng jQuery mới bằng cách $.fn.someFunction = function()

Tuy nhiên, tôi muốn thêm chức năng để chỉ các yếu tố cụ thể. Tôi cố gắng cú pháp này và nó không hoạt động $('.someElements').fn.someFunction = function()

Tôi muốn làm điều này vì vậy mà tôi có thể gọi hàm như một nơi nào đó trong mã $('someElements').someFunction();

Answer 1

Sử dụng .bind() và .trigger()

$('button').bind('someFunction',function() { 
    alert('go away!') 
}); 


$('button').click(function(){ 
    $(this).trigger('someFunction'); 
}); 

Tính đến jQuery 1.7, phương pháp .on() là ưa thích phương pháp cho gắn trình xử lý sự kiện vào quảng cáo ocument.

Answer 2

Tôi có một ý tưởng mà tôi nghĩ có thể làm việc để làm chặt chẽ với những gì bạn muốn, nhưng nó không hiệu quả, và kết luận của tôi là điều này là không thể.

Ý tưởng của tôi là để làm những gì bạn đã cố gắng, nhưng trên một đối tượng jQuery lưu trữ, ví dụ:

var a = $("a"); 
a.fn.someFunc = function() {...}; 
a.someFunc();

Nhưng kể từ $(...).fn không tồn tại, đó là không thể.

Answer 3

yo có thể làm các việc trên với điều này:

$.fn.testFn = function(){ 
    this.each(function(){ 
     var className = $(this).attr('class'); 
     $(this).html(className); 
    });  
}; 

$('li').testFn(); //or any element you want 

Test: http://jsfiddle.net/DarkThrone/nUzJN/

Answer 4

Tôi cũng không chắc chắn với câu trả lời của mình nếu điều này sẽ giúp bạn nhưng chỉ cần thử cách sử dụng .live?

$(selector).live(click,function(){ 
    //some codes here 
}); 

Answer 5

Yo, cần làm điều tương tự, đã đưa ra điều này. nguyên nhân tốt đẹp của nó, bạn phá hủy các yếu tố và chức năng đi poof! Tôi nghĩ ...

var snippet=jQuery(".myElement"); 
snippet.data('destructor', function(){ 
    //do something 
}); 
snippet.data('destructor')(); 

Answer 6

@ Câu trả lời của Reigel thật tuyệt vời! Tuy nhiên bạn cũng có thể sử dụng cú pháp $.fn và để chức năng của bạn chỉ xử lý một số yếu tố:

$.fn.someFunction = function(){ 
    this.each(function(){ 
     // only handle "someElement" 
     if (false == $(this).hasClass("someElement")) { 
      return; // do nothing 
     } 

     $(this).append(" some element has been modified"); 

     return $(this); // support chaining 
    });  
}; 

// now you can call your function like this 
$('.someElement').someFunction();    

Xem jsfiddle làm việc: http://jsfiddle.net/AKnKj/3/

Answer 7

tôi thực sự đã có trường hợp sử dụng này là tốt, nhưng với một đối tượng lưu trữ. Vì vậy, tôi đã có một đối tượng jQuery, một menu có thể chuyển đổi, và tôi muốn đính kèm hai hàm vào đối tượng đó, "mở" và "đóng". Các chức năng cần thiết để bảo toàn phạm vi của phần tử và chính nó, vì vậy tôi muốn this làm đối tượng trình đơn. Dù sao, bạn chỉ có thể thêm các hàm và các biến tất cả các ô, giống như bất kỳ đối tượng javascript nào khác. Đôi khi tôi quên điều đó.

var $menu = $('#menu'); 
$menu.open = function(){ 
    this.css('left', 0); 
    this.is_open = true; // you can also set arbitrary values on the object 
}; 
$menu.close = function(){ 
    this.css('left', '-100%'); 
    this.is_open = false; 
}; 

$menu.close(); 

Answer 8

Tôi đã làm điều này và hoạt động tốt của nó ..

function do_write(){ 
    $("#script").append("<script> $(\'#t"+(id_app+4)+"\').change(function(){ alert('Write Your Code here'); });<\/script>"); 
    console.log("<script> $(\'#t"+(id_app+4)+"\').change(function(){ alert('hello'); });<\/script>"); 
} 

và chức năng cuộc gọi từ chức năng động của bạn mà đang tạo ra một điều khiển năng động trong html

Answer 9

Nếu bạn đang muốn chức năng này chỉ dành cho selectors Đặc biệt, đây sẽ làm việc cho bạn. Tôi đã có một kịch bản mà tôi đã cần điều này và nó hoạt động độc đáo.

$('.my-selector').each(function(){ 

    $(this).init.prototype.getUrl = function(){ 
     // do things 
    }; 
}) 

thì sau này bạn có thể làm

$('.my-selector').getUrl() 

mà không cần phải định nghĩa nó như là một plugin, hoặc sử dụng dữ liệu hoặc bind/sự kiện/cò.

Rõ ràng, bạn có thể thay đổi chức năng để trả lại đối tượng chứa nếu bạn muốn sử dụng nó trong chaining được kết bằng cách quay this

$('.my-selector').each(function(){ 

    $(this).init.prototype.getUrl = function(){ 
     // do things 
     return this; 
    }; 
}) 

Answer 10

Các giải pháp rõ ràng nhất là gán một chức năng như tài sản của đối tượng:

obj.prop("myFunc", function() { 
    return (function(arg) { 
    alert("It works! " + arg); 
    }); 
}); 

Sau đó gọi nó trên đối tượng theo cách này:

obj.prop("myFunc")("Cool!"); 

Lưu ý: chức năng của bạn là giá trị trả về của cái bên ngoài, xem: http://api.jquery.com/prop/#prop-propertyName-function