Dengan kode jQuery seperti:
$("#myid").click(myfunction);
function myfunction(arg1, arg2) {/* something */}
Bagaimana cara menyampaikan argumen myfunction
saat menggunakan jQuery?
javascript
jquery
Edward Wong Hau Pepelu Tivrusk
sumber
sumber
Jawaban:
Cara termudah adalah melakukannya seperti itu (dengan asumsi Anda tidak ingin informasi acara apa pun diteruskan ke fungsi) ...
$("#myid").click(function() { myfunction(arg1, arg2); });
jsFiddle .
Ini membuat fungsi anonim, yang dipanggil saat
click
acara dipicu. Ini pada gilirannya akan memanggilmyfunction()
dengan argumen yang Anda berikan.Jika Anda ingin mempertahankan
ThisBinding
(nilaithis
saat fungsi dipanggil, setel ke elemen yang memicu kejadian), maka panggil fungsi dengancall()
.$("#myid").click(function() { myfunction.call(this, arg1, arg2); });
jsFiddle .
Anda tidak dapat meneruskan referensi secara langsung dengan cara yang dinyatakan contoh Anda, atau argumen tunggalnya adalah objek jQuery
event
.Jika Anda tidak ingin lulus referensi, Anda harus memanfaatkan jQuery
proxy()
fungsi (yang merupakan browser wrapper salib untukFunction.prototype.bind()
). Hal ini memungkinkan Anda melewati argumen, yang terikat sebelum ituevent
argumen.$("#myid").click($.proxy(myfunction, null, arg1, arg2));
jsFiddle .
Dalam contoh ini,
myfunction()
akan dieksekusi denganThisBinding
utuh (null
bukan objek, jadi nilai normalthis
elemen yang memicu kejadian digunakan), bersama dengan argumen (dalam urutan)arg1
,arg2
dan akhirnyaevent
objek jQuery , yang dapat Anda abaikan. jika tidak diperlukan (bahkan jangan beri nama dalam argumen fungsi).Anda juga dapat menggunakan
event
objek jQuerydata
untuk meneruskan data, tetapi ini akan memerlukan modifikasimyfunction()
untuk mengaksesnya melaluievent.data.arg1
(yang bukan merupakan argumen fungsi seperti pertanyaan Anda menyebutkan), atau setidaknya memperkenalkan fungsi proxy manual seperti contoh sebelumnya atau yang dihasilkan menggunakan contoh terakhir.sumber
myfunction(this, arg1, arg2)
dari penangan anonim. Kemudian fungsi Anda dapat melakukannyamyfunction(el, arg1, arg2) { alert($(el).val()); }
myfunction.call(this, arg1, arg2)
.$("#myid").on('click', {arg1: 'hello', arg2: 'bye'}, myfunction); function myfunction(e) { var arg1 = e.data.arg1; var arg2 = e.data.arg2; alert(arg1); alert(arg2); } //call method directly: myfunction({ arg1: 'hello agian', arg2: 'bye again' });
Juga memungkinkan Anda untuk mengikat dan melepaskan penangan kejadian tertentu menggunakan metode hidup dan mati.
Contoh:
$("#myid").off('click', myfunction);
Ini akan melepaskan penangan fungsi saya dari #myid
sumber
sementara Anda pasti harus menggunakan jawaban Alex, metode "bind" perpustakaan prototipe telah distandarisasi di Ecmascript 5, dan akan segera diimplementasikan di browser secara native. Ini bekerja seperti ini:
jQuery("#myid").click(myfunction.bind(this, arg1, arg2));
sumber
this
disetel ke konteks yang berbeda jika Anda menggunakan metode ini, misalnya,bind()
memasukkannya kethis
dalam konteks itu (global) dapat mengakibatkan handler klik tersebut memilikiwindow
objekthis
sebagai lawan referensi ke#myid
elemen?people reading my answers are smart enough to figure these details out themselves
, bukan tentang Ecmascript.Benang tua, tapi untuk tujuan pencarian; mencoba:
$(selector).on('mouseover',...);
... dan periksa parameter "data": http://api.jquery.com/on/
misalnya:
function greet( event ) { alert( "Hello " + event.data.name ); } $( "button" ).on( "click", {name: "Karl"}, greet ); $( "button" ).on( "click", {name: "Addy"}, greet );
sumber
Sudah ada jawaban yang bagus, tapi bagaimanapun, ini dua sen saya. Anda juga bisa menggunakan:
$("#myid").click({arg1: "foo", arg2: "bar"}, myfunction)
Dan pendengarnya akan terlihat seperti:
function myfunction(event){ alert(event.data.arg1); alert(event.data.arg2); }
sumber
Sederhana:
$(element).on("click", ["Jesikka"], myHandler); function myHandler(event){ alert(event.data); //passed in "event.data" }
sumber