JQuery kullanarak onClick olayını dinamik olarak ekleme


128

Kullanılan bir eklenti nedeniyle, "onClick" özelliğini her zamanki gibi HTML form girişlerine ekleyemiyorum. Bir eklenti, sitemdeki formlar bölümünü işliyor ve bunu otomatik olarak yapma seçeneği sunmuyor.

Temel olarak şu girdiye sahibim:

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

Bunun gibi olması için jQuery onload ile bir onClick eklemek istiyorum:

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

Bunu nasıl yapacağım?

Bunun standart bir uygulama olmayabileceğini biliyorum, ancak benim durumumda yapılacak en kolay seçenek gibi görünüyor.

Ben jQuery'de acemiyim, bu yüzden herhangi bir yardım çok takdir ediliyor.

Yanıtlar:


211

clickOlayı kullanabilir ve işlevinizi çağırabilir veya mantığınızı işleyiciye taşıyabilirsiniz:

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

clickOlayı kullanabilir ve işlevinizi işleyici olarak ayarlayabilirsiniz:

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

.Tıklayın()

Bir olay işleyicisini "click" JavaScript etkinliğine bağlayın veya bir öğede bu olayı tetikleyin.

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


İşlevinize onbağlı olayı kullanabilir ve "click"işlevinizi çağırabilir veya mantığınızı işleyiciye taşıyabilirsiniz:

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

İşleyici olarak işlevinize onbağlı olayı kullanabilir "click"ve ayarlayabilirsiniz:

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

.sistem ()

Seçili öğelere bir veya daha fazla olay için bir olay işleyici işlevi ekleyin.

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


Basit ve anlaşılması kolay. Tam olarak istediğim gibi. Başka bir soru: jQuery kullanarak bir arka plan rengi değişikliğini entegre etmenin en kolay yolu nedir? yoksa 'style.backgroundColor = "white";' kullanmak daha mı iyi? işlev bölümünde?
Claudio Delgado

39

Nesne istemcinizin adını biliyorsanız bu yaklaşımı deneyin (bunun Button veya TextBox olması önemli değildir)

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

JQuery ile bir sunucu nesnesine onClick olayını eklemek istiyorsanız bunları deneyin

$('#' + '<%= ButtonName.ClientID %>').removeAttr('onclick');
$('#' + '<%= ButtonName.ClientID %>').attr('onClick', 'FunctionName(this);');

Bu, işlevi aynı anda çağırmadan ayarlar.
Vassilis

.Click yerine .attr onClick kullanmak, "history.go(0);"veya gibi bir işlevi çağırmak yerine doğrudan bir komut dosyası komutu atayabileceğiniz anlamına da gelir "alert('Hi!');".
Jonathan

2
Hem ayrı bir fonksiyon tanımlayabilmek hem de fonksiyonu çağırmadan ayarlayabilmek istediğim için tam da ihtiyacım olan şey buydu. 4 yıl geç teşekkür ederim.
kevin walker

1
Bu yanıtla ilgili sevdiğim şey, işlevi çağırmaması, yalnızca
onclick'i ayarlamasıdır

18

Aşağıdaki yaklaşımı deneyin,

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

veya jQuery'nin mutlak bir gereklilik olmaması durumunda aşağıdakileri deneyin,

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

Bununla birlikte, yukarıdaki yöntemin, onclick'i işleyici olarak kaydedilmek yerine bir özellik olarak ayarladığı için birkaç dezavantajı vardır ...

Bu gönderi hakkında daha fazlasını okuyun https://stackoverflow.com/a/6348597/297641


'Ancak yukarıdaki yöntem' dediğinizde, yalnızca düz javascript yöntemine mi başvurduğunuz .onclickyoksa her iki sürümü de kullanmaya kıyasla tek bir sürüm olarak mı gruplandırdığınız net değildir .click. .onİşleyiciyi kaydettiği gibi aslında eski olduğunu biliyorum , ancak bunu öğrenmek için başka bir yere bakmam gerekti. Cevabınızda daha net olsaydı gelecekteki okuyucular için iyi olurdu ...;)
AntonChanning


1
let a = $("<a>bfCaptchaEntry</a>");
a.attr("onClick", "function(" + someParameter+ ")");

0

Veya tanımlamak için bir ok işlevi kullanabilirsiniz:

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

  });
});

Daha iyi tarayıcı desteği için:

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

  });
});

1
Kabul edilen cevap .click()yöntemi zaten önerdiği için bunun nasıl yeni bir şey sağladığını görmüyorum . Ok işlevlerinin mi yoksa normal işlevlerin mi kullanılacağı, bence sorulan soruyla ilgili olmayan bir tartışmadır. Ve daha iyi bir tarayıcı desteği için, yalnızca birincisini değil, muhtemelen her iki ok işlevini de kaldırmalısınız.
agrm

Çünkü jQuery'yi kullanmanın başka bir yolu
Gabriel Jaime Sierra Rua
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.