Как динамически изменить обработчик onClick?
Я уверен, что есть миллион сообщений об этом там, но удивительно, у меня есть проблемы с поиском чего-то.
У меня есть простой скрипт, в котором я хочу установить обработчик onClick для <A> ссылка на инициализацию страницы.
Когда я запускаю это, я сразу же получаю окно с предупреждением "foo", в котором я ожидал получить предупреждение только при нажатии на ссылку.
Что за глупость я делаю не так? (Я пробовал click= и onClick=)...
<script language="javascript">
function init(){
document.getElementById("foo").click = new function() { alert('foo'); };
}
</script>
<body onload="init()">
<a id="foo" href=#>Click to run foo</a>
</body>
Изменить: я изменил свой принятый ответ на ответ JQuery. Технически правильный ответ на мой первоначальный вопрос - " Мэр Орлигссон".click должно быть onclick а также new должен быть удален), но я настоятельно рекомендую любому использовать 'document.getElementById (...) непосредственно в своем коде - и вместо этого использовать jQuery.
11 ответов
JQuery:
$('#foo').click(function() { alert('foo'); });
Или, если вы не хотите, чтобы он шел по ссылке href:
$('#foo').click(function() { alert('foo'); return false; });
Пытаться:
document.getElementById("foo").onclick = function (){alert('foo');};
Использование .onclick (все строчные). Вот так:
document.getElementById("foo").onclick = function () {
alert('foo'); // do your stuff
return false; // <-- to suppress the default link behaviour
};
На самом деле, вы, вероятно, окажетесь намного лучше, используя хорошую библиотеку (я рекомендую jQuery по нескольким причинам), чтобы начать работу и писать чистый javascript.
Кросс-браузерная (не) совместимость - это настоящий ад для любого, не говоря уже о том, кто только начинает.
Я попробовал более или менее все другие решения на днях, но ни одно из них не работало на меня, пока я не попробовал это:
var submitButton = document.getElementById('submitButton');
submitButton.setAttribute('onclick', 'alert("hello");');
Насколько я могу сказать, это работает отлично.
Если вы хотите передать переменные из текущей функции, другой способ сделать это, например:
document.getElementById("space1").onclick = new Function("lrgWithInfo('"+myVar+"')");
Если вам не нужно передавать информацию из этой функции, это просто:
document.getElementById("space1").onclick = new Function("lrgWithInfo('13')");
OMG... Это не только проблема "jQuery Library" и "getElementById".
Несомненно, jQuery помогает нам отложить кросс-браузерные проблемы, но использование традиционного способа без библиотек все еще может работать хорошо, если вы действительно понимаете JavaScript ДОСТАТОЧНО!!!
И @Már Örlygsson, и @Darryl Hein дали вам хорошие АЛТАРНАТИВЫ (я бы сказал, они просто альтернативные выражения, а не anwsers), где первый использовал традиционный способ, а второй - способ jQuery. Но вы действительно знаете ответ на свою проблему? Что не так с вашим кодом?
Первый, .click это способ JQuery. Если вы хотите использовать традиционный способ, используйте вместо этого.onclick. Или я рекомендую вам сосредоточиться на изучении использования только jQuery, в случае путаницы. jQuery - хороший инструмент для использования без достаточного знания DOM.
Вторая проблема, также критическая, new function(){} это очень плохой синтаксис, или сказать, что это неправильный синтаксис.
Независимо от того, хотите ли вы использовать jQuery или нет, вам нужно уточнить это.
Существует 3 основных способа объявления функций:
function name () {code}
... = function() {code} // known as anonymous function or function literal
... = new Function("code") // Function Object
Обратите внимание, что в JavaScript учитывается регистр, поэтому new function() не является стандартным синтаксисом JavaScript. Браузеры могут неправильно понимать значение.
Таким образом, ваш код может быть изменен, используя второй способ, как
= function(){alert();}
Или используя третий способ как
= new Function("alert();");
Прорабатывая это, второй способ работает почти так же, как третий, и второй способ очень распространен, а третий встречается редко. Оба ваших лучших ответа используют второй способ.
Тем не менее, третий способ может сделать то, чего не может сделать второй, из-за "времени выполнения" и "времени компиляции". Я просто надеюсь, что ты знаешь new Function() может быть полезным иногда. Однажды вы столкнетесь с проблемами, используя function(){}не забудь new Function(),
Чтобы понять больше, рекомендуем прочитать << JavaScript: Полное руководство, 6-е издание >>, О'Рейли.
Я согласен, что использование jQuery - лучший вариант. Вам также следует избегать использования функции onload тела и использовать вместо этого функцию готовности jQuery. Что касается слушателей событий, они должны быть функциями, которые принимают один аргумент:
document.getElementById("foo").onclick = function (event){alert('foo');};
или в jQuery:
$('#foo').click(function(event) { alert('foo'); }
Вот аналог YUI для постов jQuery выше.
<script>
YAHOO.util.Event.onDOMReady(function() {
document.getElementById("foo").onclick = function (){alert('foo');};
});
</script>
Пример YUI выше должен быть:
<script>
YAHOO.util.Event.onDOMReady(function() {
Dom.get("foo").onclick = function (){alert('foo');};
});
</script>
Никто не обратился к реальной проблеме, которая происходила, чтобы объяснить, почему было выпущено предупреждение.
Этот код: document.getElementById("foo").click = new function() { alert('foo'); }; назначает свойство click для #foo элемент к пустому объекту. Здесь анонимная функция предназначена для инициализации объекта. Мне нравится думать об этом типе функции как о конструкторе. Вы помещаете туда предупреждение, чтобы оно вызывалось, потому что функция вызывается немедленно.
Смотрите этот вопрос.
Я думаю, что вы хотите использовать методы jbuery .bind и .unBind. В моем тестировании изменение события click с использованием.click и.onclick фактически вызвало вновь назначенное событие, что привело к бесконечному циклу.
Например, если события, между которыми вы переключаетесь, это hide() и unHide(), и нажатие одного переключает событие click на другое, вы бы оказались в непрерывном цикле. Лучшим способом было бы сделать это:
$(element).unbind().bind( 'click' , function(){ alert('!') } );