Динамическое добавление события onClick с помощью jQuery

128

Из-за того, что используется плагин, я не могу добавить атрибут onClick во входные данные HTML-формы, как обычно. Плагин обрабатывает часть форм на моем сайте и не дает возможности делать это автоматически.

В основном у меня есть этот ввод:

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

Я хочу добавить к нему onClick с jQuery onload, чтобы он был таким:

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

Как мне это сделать?

Я знаю, что это может быть не стандартной практикой, но кажется самым простым вариантом в моей ситуации.

Я новичок в jQuery, поэтому очень приветствую любую помощь.

javascript jquery html Клаудио Дельгадо
источник

Ответы:

211

Вы можете использовать clickсобытие и вызвать свою функцию или переместить логику в обработчик:

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

Вы можете использовать clickсобытие и установить свою функцию в качестве обработчика:

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

.click ()

Привяжите обработчик событий к событию JavaScript "click" или инициируйте это событие для элемента.

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

Вы можете использовать onпривязанное к событию событие "click"и вызвать свою функцию или переместить логику в обработчик:

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

Вы можете использовать onсобытие, привязанное к нему, "click"и установить свою функцию в качестве обработчика:

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

.на()

Присоедините функцию обработчика событий для одного или нескольких событий к выбранным элементам.

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

охотник
источник
Просто и понятно. Именно то, что я хотел. Другой вопрос: как проще всего интегрировать изменение цвета фона с помощью jQuery? или лучше использовать style.backgroundColor = "white"; в разделе функций?
Клаудио Дельгадо
39

попробуйте этот подход, если вы знаете имя клиента вашего объекта (не важно, что это Button или TextBox)

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

попробуйте это, если вы хотите добавить событие onClick к объекту сервера с помощью JQuery

$('#' + '<%= ButtonName.ClientID %>').removeAttr('onclick');
$('#' + '<%= ButtonName.ClientID %>').attr('onClick', 'FunctionName(this);');
Ардалан Шахголи
источник
Он устанавливает функцию, не вызывая ее одновременно.
Василис
Использование .attr onClick вместо .click также означает, что вы можете напрямую назначить команду сценария вместо вызова функции, например "history.go(0);"или "alert('Hi!');".
Джонатан
2
Это именно то, что мне было нужно, так как я хотел иметь возможность как определять отдельную функцию, так и иметь возможность устанавливать функцию, не вызывая ее. Спасибо за опоздание на 4 года.
Кевин Уокер,
1
Что мне нравится в этом ответе, так это то, что он не вызывает функцию, а только устанавливает onclick
gdrt
18

Попробуйте ниже подход,

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

или если jQuery не является абсолютной необходимостью, попробуйте ниже,

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

Однако у вышеуказанного метода есть несколько недостатков, поскольку он устанавливает onclick как свойство, а не регистрируется как обработчик ...

Подробнее читайте в этом сообщении https://stackoverflow.com/a/6348597/297641

Сельвакумар Арумугам
источник
Когда вы говорите «Однако вышеупомянутый метод», неясно, ссылаетесь ли вы только на простой метод javascript .onclickили группируете обе версии как одну по сравнению с использованием .click. Я знаю, что это на самом деле первое, как .onи зарегистрированный обработчик, но мне пришлось проверить в другом месте, чтобы узнать это. Будущим читателям было бы хорошо, если бы ваш ответ был более ясным ...;)
АнтонЧаннинг
7 
$("#bfCaptchaEntry").click(function(){
    myFunction();
});
Парв Шарма
источник
1 
let a = $("<a>bfCaptchaEntry</a>");
a.attr("onClick", "function(" + someParameter+ ")");
GDBxNS
источник
0

Или вы можете использовать функцию стрелки, чтобы определить его:

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

  });
});

Для лучшей поддержки браузером:

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

  });
});
Габриэль Хайме Сьерра Руа
источник
1
Я не понимаю, как это дает что-то новое, поскольку принятый ответ уже предлагал .click()метод. На мой взгляд, обсуждение вопроса о том, использовать ли стрелочные или обычные функции, не связано с заданным вопросом. И для лучшей поддержки браузера вам, вероятно, следует удалить обе стрелочные функции, а не только первую.
agrm 05
Потому что это еще один способ использовать jQuery
Габриэль Хайме Сьерра Руа