Как изменить событие onclick с jquery?

Ответ 1

Вы можете легко изменить событие onclick элемента с помощью jQuery, не запуская новую функцию с помощью:

$("#id").attr("onclick","new_function_name()");

Написав эту строку, вы фактически измените атрибут onclick в #id.

Вы также можете использовать:

document.getElementById("id").attribute("onclick","new_function_name()");

Ответ 2

Удалить старый обработчик событий

jQuery('#id').unbind('click');

И добавьте новый

jQuery('#id').click(function(){
    // your code here
});

Ответ 3

Обновление этого сообщения (2015): unbind/bind больше не следует использовать с jQuery 1.7+. Вместо этого используйте функцию off(). Пример:

$('#id').off('click');
$('#id').click(function(){
    myNewFunction();
    //Other code etc.
});

Убедитесь, что вы вызываете непараметрическую функцию в .click, иначе она будет проигнорирована.

Ответ 4

$('#id').attr('onclick', 'function()');

Сейчас (11 июля 2015 г.) это решение все еще работает (jquery 2.1.4); на мой взгляд, это лучший выбор.

Ответ 5

Если вы хотите изменить одно конкретное событие onclick с помощью jQuery, лучше использовать функции . on() и . off() с пространством имен (см. документацию).

Используйте .on() для создания своего события и .off(), чтобы удалить его. Вы также можете создать глобальный объект, например g_specific_events_set = {};, чтобы избежать дублирования:

$('#alert').click(function()
{
    alert('First alert!');
});

g_specific_events_set = {};

add_specific_event = function(namespace)
{
    if (!g_specific_events_set[namespace])
    {
        $('#alert').on('click.' + namespace, function()
        {
            alert('SECOND ALERT!!!!!!');
        });
        g_specific_events_set[namespace] = true;
    }
};

remove_specific_event = function(namespace)
{
    $('#alert').off('click.' + namespace);
    g_specific_events_set[namespace] = false;
};



$('#add').click(function(){ add_specific_event('eventnumber2'); });

$('#remove').click(function(){ remove_specific_event('eventnumber2'); });

div {
  display:inline-block;
  vertical-align:top;
  margin:0 5px 1px 5px;
  padding:5px 20px;
  background:#ddd;
  border:1px solid #aaa;
  cursor:pointer;
}
div:active {
  margin-top:1px;
  margin-bottom:0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="alert">
  Alert
</div>
<div id="add">
  Add event
</div>
<div id="remove">
  Remove event
</div>

Ответ 6

(2019) Я использовал $('#'+id).removeAttr().off('click').on('click', function(){...});

Я попытался $('#'+id).off().on(...), но сбрасывать атрибут onClick при каждом вызове для сброса не получится.

Я использую .on('click',function(){...});, чтобы избежать необходимости заключать в кавычки блокировку всех моих функций JavaScript.

О.П. теперь может использовать:

$(this).removeAttr('onclick').off('click').on('click', function(){ displayCalendar(document.prjectFrm[ia + 'dtSubDate'],'yyyy-mm-dd', this); });

Для меня это произошло, когда мой div был установлен со статически установленным атрибутом onClick:

<div onclick = '...'>

В противном случае, если бы у меня был только динамически подключенный слушатель, я бы использовал $('#'+id).off().on('click', function(){...});.

Без выключения ('click') мои слушатели onClick были добавлены, а не заменены.

Ответ 7

@Amirali

console.log(document.getElementById("SAVE_FOOTER"));
document.getElementById("SAVE_FOOTER").attribute("onclick","console.log('c')");

броски:

Uncaught TypeError: document.getElementById(...).attribute is not a function

в хроме.

Элемент существует и сбрасывается в консоли;