Dynamiczne dodawanie zdarzenia onClick za pomocą jQuery

128

Z powodu używanej wtyczki nie mogę jak zwykle dodać atrybutu „onClick” do danych wejściowych formularza HTML. Wtyczka obsługuje część formularzy w mojej witrynie i nie daje możliwości zrobienia tego automatycznie.

Zasadniczo mam to wejście:

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

Chcę dodać onClick do niego z jQuery onload, aby wyglądało to tak:

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

Jak mam to zrobić?

Wiem, że może to nie być standardowa praktyka, ale wydaje się, że jest to najłatwiejsza opcja w mojej sytuacji.

Jestem nowicjuszem w jQuery, więc każda pomoc jest bardzo mile widziana.

Claudio Delgado
źródło

Odpowiedzi:

211

Możesz użyć clickzdarzenia i wywołać swoją funkcję lub przenieść logikę do modułu obsługi:

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

Możesz użyć clickzdarzenia i ustawić swoją funkcję jako procedurę obsługi:

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

.Kliknij()

Powiąż moduł obsługi zdarzenia ze zdarzeniem JavaScript „click” lub wywołaj to zdarzenie w elemencie.

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


Możesz użyć onzdarzenia związanego z "click"i wywołać swoją funkcję lub przenieść logikę do modułu obsługi:

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

Możesz użyć onzdarzenia związanego z "click"i ustawić swoją funkcję jako procedurę obsługi:

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

.na()

Dołącz funkcję obsługi zdarzeń dla co najmniej jednego zdarzenia do wybranych elementów.

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

myśliwy
źródło
Proste i łatwe do zrozumienia. Dokładnie to, czego chciałem. Kolejne pytanie: jaki jest najłatwiejszy sposób na zintegrowanie zmiany koloru tła za pomocą jQuery? czy lepiej jest użyć „style.backgroundColor =" white "; ' w sekcji funkcji?
Claudio Delgado
39

wypróbuj to podejście, jeśli znasz nazwę klienta obiektu (nie jest ważne, że jest to Button czy TextBox)

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

wypróbuj te, jeśli chcesz dodać zdarzenie onClick do obiektu serwera za pomocą JQuery

$('#' + '<%= ButtonName.ClientID %>').removeAttr('onclick');
$('#' + '<%= ButtonName.ClientID %>').attr('onClick', 'FunctionName(this);');
Ardalan Shahgholi
źródło
Ten ustawia funkcję bez wywoływania jej w tym samym czasie.
Vassilis
Użycie .attr onClick zamiast .click oznacza również, że możesz bezpośrednio przypisać polecenie skryptu zamiast wywoływania funkcji, takiej jak "history.go(0);"lub "alert('Hi!');".
Jonathan
2
Właśnie tego potrzebowałem, ponieważ chciałem móc zarówno zdefiniować oddzielną funkcję, jak i móc ustawić funkcję bez jej wywoływania. Dziękuję za 4 lata.
kevin walker
1
To, co podoba mi się w tej odpowiedzi, to to, że nie wywołuje funkcji, a jedynie ustawia onclick
gdrt
18

Wypróbuj poniższe podejście,

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

lub jeśli jQuery nie jest absolutną koniecznością, spróbuj poniżej,

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

Jednak powyższa metoda ma kilka wad, ponieważ ustawia onclick jako właściwość, a nie jest rejestrowana jako program obsługi ...

Przeczytaj więcej w tym poście https://stackoverflow.com/a/6348597/297641

Selvakumar Arumugam
źródło
Kiedy mówisz „Jednak powyższa metoda”, nie jest jasne, czy odnosisz się tylko do zwykłej metody javascript .onclick, czy też grupujesz obie wersje jako jedną w porównaniu z metodą używaną .click. Wiem, że tak naprawdę jest to pierwsze, podobnie .onjak rejestracja przewodnika, ale musiałem sprawdzić gdzie indziej, aby się tego dowiedzieć. Byłoby dobrze dla przyszłych czytelników, gdyby była bardziej klarowna w twojej odpowiedzi ...;)
AntonChanning
7
$("#bfCaptchaEntry").click(function(){
    myFunction();
});
Parv Sharma
źródło
1
let a = $("<a>bfCaptchaEntry</a>");
a.attr("onClick", "function(" + someParameter+ ")");
GDBxNS
źródło
0

Lub możesz użyć funkcji strzałki, aby ją zdefiniować:

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

  });
});

Aby uzyskać lepszą obsługę przeglądarki:

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

  });
});
Gabriel Jaime Sierra Rua
źródło
1
Nie widzę, jak to zapewnia coś nowego, ponieważ zaakceptowana odpowiedź sugerowała już .click()metodę. To, czy używać funkcji strzałkowych, czy zwykłych funkcji, jest moim zdaniem dyskusją niezwiązaną z zadanym pytaniem. Aby zapewnić lepszą obsługę przeglądarki, prawdopodobnie powinieneś usunąć obie funkcje strzałek, nie tylko pierwszą.
agrm
Ponieważ jest inny sposób korzystania z jQuery
Gabriel Jaime Sierra Rua