Menambahkan acara onClick secara dinamis menggunakan jQuery

128

Karena plugin sedang digunakan, saya tidak dapat menambahkan atribut "onClick" ke input formulir HTML seperti biasa. Sebuah plugin menangani bagian formulir di situs saya dan tidak memberikan opsi untuk melakukan ini secara otomatis.

Pada dasarnya saya memiliki masukan ini:

<input type="text" id="bfCaptchaEntry" name="bfCaptchaEntry" style="">

Saya ingin menambahkan onClick ke dalamnya dengan jQuery onload agar menjadi seperti ini:

<input onClick="myfunction()" type="text" id="bfCaptchaEntry" name="bfCaptchaEntry" style="">

Bagaimana cara saya melakukan ini?

Saya tahu ini mungkin bukan praktik standar tetapi sepertinya pilihan termudah untuk dilakukan dalam situasi saya.

Saya seorang pemula di jQuery jadi bantuan apa pun sangat kami hargai.

Claudio Delgado
sumber

Jawaban:

211

Anda dapat menggunakan clickevent dan memanggil fungsi Anda atau memindahkan logika Anda ke handler:

$("#bfCaptchaEntry").click(function(){ myFunction(); });

Anda dapat menggunakan clickacara dan menyetel fungsi Anda sebagai penangan:

$("#bfCaptchaEntry").click(myFunction);

.klik()

Ikat event handler ke event JavaScript "click", atau picu event tersebut pada sebuah elemen.

http://api.jquery.com/click/


Anda bisa menggunakan onevent terikat "click"dan memanggil fungsi Anda atau memindahkan logika Anda ke handler:

$("#bfCaptchaEntry").on("click", function(){ myFunction(); });

Anda bisa menggunakan onevent terikat "click"dan mengatur fungsi Anda sebagai handler:

$("#bfCaptchaEntry").on("click", myFunction);

.di()

Lampirkan fungsi penanganan kejadian untuk satu atau lebih kejadian ke elemen yang dipilih.

http://api.jquery.com/on/

pemburu
sumber
Sederhana dan mudah dimengerti. Persis seperti yang saya inginkan. Pertanyaan lain: apa cara termudah untuk mengintegrasikan perubahan warna latar belakang menggunakan jQuery? atau lebih baik menggunakan 'style.backgroundColor = "white";' di bagian fungsi?
Claudio Delgado
39

coba pendekatan ini jika Anda mengetahui nama klien objek Anda (tidak penting bahwa itu adalah Button atau TextBox)

$('#ButtonName').removeAttr('onclick');
$('#ButtonName').attr('onClick', 'FunctionName(this);');

coba yang ini jika Anda ingin menambahkan acara onClick ke objek server dengan JQuery

$('#' + '<%= ButtonName.ClientID %>').removeAttr('onclick');
$('#' + '<%= ButtonName.ClientID %>').attr('onClick', 'FunctionName(this);');
Ardalan Shahgholi
sumber
Yang satu ini menyetel fungsinya, tanpa memanggilnya pada saat yang bersamaan.
Vassilis
Menggunakan .attr onClick sebagai ganti .click juga berarti Anda dapat langsung menetapkan perintah skrip alih-alih memanggil fungsi, seperti "history.go(0);"atau "alert('Hi!');".
Jonathan
2
Inilah yang saya butuhkan, karena saya ingin dapat mendefinisikan fungsi yang terpisah dan dapat mengatur fungsi tanpa memanggilnya. Terima kasih telat 4 tahun.
kevin walker
1
Yang saya suka tentang jawaban ini adalah bahwa ia tidak memanggil fungsi tetapi hanya menyetel onclick
gdrt
18

Coba pendekatan di bawah ini,

$('#bfCaptchaEntry').on('click', myfunction);

atau jika jQuery bukan merupakan kebutuhan mutlak, coba di bawah ini,

document.getElementById('bfCaptchaEntry').onclick = myfunction;

Namun metode di atas memiliki beberapa kekurangan karena ia menyetel onclick sebagai properti daripada didaftarkan sebagai penangan ...

Baca lebih lanjut di posting ini https://stackoverflow.com/a/6348597/297641

Selvakumar Arumugam
sumber
Ketika Anda mengatakan 'Bagaimanapun metode di atas', tidak jelas apakah Anda merujuk hanya metode javascript biasa .onclick, atau mengelompokkan kedua versi sebagai satu perbandingan dengan menggunakan .click. Saya tahu ini sebenarnya yang pertama, seperti .onhalnya mendaftarkan pawang, tetapi harus memeriksa di tempat lain untuk mempelajarinya. Akan lebih baik bagi pembaca di masa mendatang jika jawaban Anda lebih jelas ...;)
AntonChanning
7
$("#bfCaptchaEntry").click(function(){
    myFunction();
});
Parv Sharma
sumber
1
let a = $("<a>bfCaptchaEntry</a>");
a.attr("onClick", "function(" + someParameter+ ")");
GDBxNS
sumber
0

Atau Anda dapat menggunakan fungsi panah untuk menentukannya:

$(document).ready(() => {
  $('#bfCaptchaEntry').click(()=>{

  });
});

Untuk dukungan browser yang lebih baik:

$(document).ready(function() {
  $('#bfCaptchaEntry').click(()=>{

  });
});
Gabriel Jaime Sierra Rua
sumber
1
Saya tidak melihat bagaimana ini memberikan sesuatu yang baru karena jawaban yang diterima sudah menyarankan .click()metode tersebut. Apakah menggunakan fungsi panah atau fungsi biasa, menurut saya, diskusi tidak terkait dengan pertanyaan yang diajukan. Dan untuk dukungan browser yang lebih baik, Anda mungkin harus menghapus kedua fungsi panah, bukan hanya yang pertama.
agrm
Karena cara lain untuk menggunakan jQuery
Gabriel Jaime Sierra Rua