jQuery's .click - meneruskan parameter ke fungsi pengguna

283

Saya mencoba memanggil fungsi dengan parameter menggunakan jQuery's. Klik, tapi saya tidak bisa membuatnya berfungsi.

Inilah yang saya inginkan:

$('.leadtoscore').click(add_event('shot'));

yang memanggil

function add_event(event) {
    blah blah blah }

Ini berfungsi jika saya tidak menggunakan parameter, seperti ini:

$('.leadtoscore').click(add_event);
function add_event() {
    blah blah blah }

Tapi saya harus bisa melewati parameter ke add_eventfungsi saya .

Bagaimana saya bisa melakukan hal khusus ini?

Saya tahu saya bisa menggunakan .click(function() { blah }, tetapi saya memanggil add_eventfungsi dari beberapa tempat dan ingin melakukannya dengan cara ini.

Paul Hoffer
sumber
ini diadopsi dari patricksjawaban, yang menurut saya merupakan solusi hebat: jsfiddle.net/naRRk/1
jAndy

Jawaban:

514

Untuk ketelitian, saya menemukan solusi lain yang merupakan bagian dari fungsi yang diperkenalkan di versi 1.4.3 dari event handler klik jQuery .

Ini memungkinkan Anda untuk meneruskan peta data ke objek acara yang secara otomatis akan diumpankan kembali ke fungsi event handler oleh jQuery sebagai parameter pertama. Peta data akan diserahkan ke .click()fungsi sebagai parameter pertama, diikuti oleh fungsi event handler.

Berikut ini beberapa kode untuk menggambarkan apa yang saya maksud:

// say your selector and click handler looks something like this...
$("some selector").click({param1: "Hello", param2: "World"}, cool_function);

// in your function, just grab the event object and go crazy...
function cool_function(event){
    alert(event.data.param1);
    alert(event.data.param2);
}

Saya tahu sudah terlambat dalam permainan untuk pertanyaan ini, tetapi jawaban sebelumnya membawa saya ke solusi ini, jadi saya harap ini membantu seseorang kapan saja!

Chris Kempen
sumber
11
Inilah yang saya inginkan (saat itu). Saya belum mengerjakan proyek ini sejak itu, tapi saya pikir saya menggunakan 1.4.0. Ini jelas cara terbaik yang tersedia.
Paul Hoffer
1
Saya secara dinamis membuat objek di sisi server dan mengikat acara klik dengan: r.OnClientClick = "imageClicked ({param1: '" + obj.Command + "'}); return false"; Kemudian di sisi klien saya memiliki: function imageClicked (event) {if (event.param1 == "GOTO PREVIOUS") {... Jika saya menggunakan event.data.param1 dikatakan bahwa itu tidak terdefinisi. Sekarang saya sudah mengetiknya di sini, saya bisa melihat perbedaannya, ya!
Keluarga
1
@Keluarga - Haaha tidak masalah, senang membantu, bahkan melalui komentar;)
Chris Kempen
5
@totymedli - Saya kira Anda selalu bisa menyebutnya di tempat lain, melewati sebuah objek dari struktur yang sama: var param_obj = {data : {param1: "Hello", param2: "World"}}; cool_function(param_obj);?
Chris Kempen
1
Ini jauh lebih baik daripada menggunakan atribut data HTML5, terima kasih! (Dan menyelesaikan JSHint mengeluh tentang menggunakan 'ini' di callback juga!)
Matthew Herbst
77

Anda perlu menggunakan fungsi anonim seperti ini:

$('.leadtoscore').click(function() {
  add_event('shot')
});

Anda dapat memanggilnya seperti yang Anda miliki dalam contoh, hanya nama fungsi tanpa parameter, seperti ini:

$('.leadtoscore').click(add_event);

Tetapi add_eventmetode ini tidak akan mendapatkan 'shot'parameternya, melainkan apa pun yang clicklolos ke panggilan baliknya, yang merupakan eventobjek itu sendiri ... jadi tidak berlaku dalam kasus ini , tetapi berfungsi untuk banyak orang lain. Jika Anda perlu meneruskan parameter, gunakan fungsi anonim ... atau, ada satu opsi lain , gunakan .bind()dan kirimkan data, seperti ini:

$('.leadtoscore').bind('click', { param: 'shot' }, add_event);

Dan mengaksesnya add_event, seperti ini:

function add_event(event) {
  //event.data.param == "shot", use as needed
}
Nick Craver
sumber
Ketika Anda mengatakan adil, apakah itu hanya berarti? Kedua, apakah itu berarti saya akan dapat menggunakan $ (ini) di dalam fungsi add_event saya seperti biasanya di dalam fungsi anonim?
Paul Hoffer
2
@phoffer - Ya, "hanya" berarti tidak ada params, hanya nama fungsi, ini referensi ke fungsi, bukan hasil dari menjalankan fungsi yang ingin Anda tetapkan ke clickhandler. Dalam metode anonim dan .bind()contoh di atas yang dapat Anda gunakan this, itu akan merujuk pada yang .loadtoscoreAnda klik (seperti yang Anda harapkan). Dalam contoh terakhir, di dalam add_event(event)yang sama benar, gunakan thisatau $(this)dan itu akan menjadi apa yang Anda inginkan.
Nick Craver
1
@phoffer: Anda harus meneruskan elemen secara eksplisit untuk menggunakannya, misalnya: function(){ add_event('shot', $(this));}dan function add_event(event, element){...}. elementakan menjadi elemen jQuery di sini (berfungsi dengan baik bind()seperti yang disebutkan Nick).
Felix Kling
@ Feliks - Dia juga dapat menggunakan $(this)di dalam fungsi, misalnya: jsfiddle.net/tSu5t
Nick Craver
35

Jika Anda menyebutnya seperti yang Anda miliki ...

$('.leadtoscore').click(add_event('shot'));

... Anda harus add_event()mengembalikan fungsi, seperti ...

function add_event(param) {
    return function() {
                // your code that does something with param
                alert( param );
           };
}

Fungsi dikembalikan dan digunakan sebagai argumen untuk .click().

pengguna113716
sumber
@jAndy - Terima kasih telah memposting contoh termasuk eventparameter. Aku seharusnya memasukkannya. : o)
user113716
27

Saya sukses menggunakan .on () seperti:

$('.leadtoscore').on('click', {event_type: 'shot'}, add_event);

Kemudian di dalam add_eventfungsi Anda mendapatkan akses ke 'menembak' seperti ini:

event.data.event_type

Lihat dokumentasi .on () untuk info lebih lanjut, di mana mereka memberikan contoh berikut:

function myHandler( event ) {
  alert( event.data.foo );
}
$( "p" ).on( "click", { foo: "bar" }, myHandler );
Kuburan Gravitasi
sumber
11

Ya, ini adalah pos lama. Bagaimanapun, seseorang mungkin menganggapnya berguna. Berikut ini cara lain untuk mengirim parameter ke penangan acara.

//click handler
function add_event(event, paramA, paramB)
{
    //do something with your parameters
    alert(paramA ? 'paramA:' + paramA : '' + paramB ? '  paramB:' + paramB : '');
}

//bind handler to click event
$('.leadtoscore').click(add_event);
...
//once you've processed some data and know your parameters, trigger a click event.
//In this case, we will send 'myfirst' and 'mysecond' as parameters
$('.leadtoscore').trigger('click', {'myfirst', 'mysecond'});

//or use variables
var a = 'first',
    b = 'second';

$('.leadtoscore').trigger('click', {a, b});
$('.leadtoscore').trigger('click', {a});
Kevin
sumber
6
      $imgReload.data('self', $self);
            $imgReload.click(function (e) {
                var $p = $(this).data('self');
                $p._reloadTable();
            });

Setel objek javaScript ke elemen klik:

 $imgReload.data('self', $self);

dapatkan Objek dari elemen "ini":

 var $p = $(this).data('self');
Vladimir Novick
sumber
Luar biasa! Sayangnya, ini adalah satu-satunya hal yang berfungsi ketika saya mencoba menggunakan variabel jquery! tidak tahu kenapa. : |
cregox
3

Saya mendapatkan solusi sederhana:

 <button id="btn1" onclick="sendData(20)">ClickMe</button>

<script>
   var id; // global variable
   function sendData(valueId){
     id = valueId;
   }
   $("#btn1").click(function(){
        alert(id);
     });
</script>

Maksud saya adalah yang meneruskan nilai onclickevent ke javascript function sendData(), menginisialisasi ke variabel dan membawanya dengan metode event handler jquery.

Ini dimungkinkan karena pada awalnya sendData(valueid)dipanggil dan menginisialisasi nilai. Kemudian setelah acara jquery dieksekusi dan gunakan nilai itu.

Ini adalah solusi lurus ke depan dan Untuk detail, klik di Sini .

susan097
sumber
Saya tidak melihat cara untuk melewatkan parameter dinamis di sini, hanya nilai-nilai hard-coded.
user1451111
dengan cara ini Anda hanya melewati valueId dan kehilangan elemen dan objek acara.
Zoltán Süle