Как динамически менять обработчик onClick?

Я уверен, что есть миллион сообщений об этом, но на удивление у меня возникли проблемы с поиском чего-то.

У меня есть простой script, где я хочу установить обработчик 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. Ответ Már Örlygsson "является технически правильным ответом на мой первоначальный вопрос (click должен быть onclick и new должен быть удален), но я сильно препятствовать кому-либо использовать 'document.getElementById(...) непосредственно в их коде - и использовать jQuery вместо этого.

ОТВЕТЫ

Ответ 1

JQuery

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

Или, если вы не хотите, чтобы он выполнял ссылку href:

$('#foo').click(function() { alert('foo'); return false; });

Ответ 2

Try:

document.getElementById("foo").onclick = function (){alert('foo');};

Ответ 3

Используйте .onclick (все строчные буквы). Например:

document.getElementById("foo").onclick = function () {
  alert('foo'); // do your stuff
  return false; // <-- to suppress the default link behaviour
};

На самом деле вам, вероятно, удастся лучше использовать какую-то хорошую библиотеку (я рекомендую jQuery по нескольким причинам) и писать чистый javascript.

Совместимость с кросс-браузером (в) - это ад, с которым можно справиться для всех - не говоря уже о том, кто только начинает.

Ответ 4

Я попробовал более или менее все другие решения на днях, но никто из них не работал у меня, пока я не попробовал это:

var submitButton = document.getElementById('submitButton');
submitButton.setAttribute('onclick',  'alert("hello");');

Насколько я могу судить, он отлично работает.

Ответ 5

Если вы хотите передать переменные из текущей функции, другой способ сделать это, например:

document.getElementById("space1").onclick = new Function("lrgWithInfo('"+myVar+"')");

Если вам не нужно передавать информацию из этой функции, просто:

document.getElementById("space1").onclick = new Function("lrgWithInfo('13')");

Ответ 6

OMG... Это не только проблема "jQuery Library" и "getElementById".

Конечно, jQuery помогает нам отбросить проблемы с кросс-браузером в стороне, но использование традиционного способа без библиотек может работать хорошо, если вы действительно понимаете JavaScript ENOUGH!!!

Оба @Марр Örlygsson и @Darryl Hein дали вам хорошие ALTARNATIVES (я бы сказал, они просто аплодируют, а не anwsers), где первый использовал традиционный способ, и последний способ jQuery. Но вы действительно знаете ответ на свою проблему? Что не так с вашим кодом?

Во-первых, .click является способом jQuery. Если вы хотите использовать традиционный способ, вместо этого используйте .onclick. Или я рекомендую вам сосредоточиться на обучении только использованию jQuery, в случае запутанности. jQuery - хороший инструмент для использования, не зная DOM.

Вторая проблема, также критическая, new function(){} - очень плохой синтаксис или сказать, что это неправильный синтаксис.

Независимо от того, хотите ли вы пойти с jQuery или без него, вам нужно его прояснить.

Существует три основных способа объявления функции:

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-е издание → , O'Reilly.

Ответ 7

Я согласен, что использование jQuery - лучший вариант. Вы также должны избегать использования функции onload для тела и вместо этого использовать jQuery. Что касается слушателей событий, они должны быть функциями, которые принимают один аргумент:

document.getElementById("foo").onclick = function (event){alert('foo');};

или в jQuery:

$('#foo').click(function(event) { alert('foo'); }

Ответ 8

Вот пример YUI для сообщений jQuery выше.

<script>
  YAHOO.util.Event.onDOMReady(function() {   
    document.getElementById("foo").onclick =  function (){alert('foo');};
  });
</script>

Ответ 9

Я бы попробовал это в jQuery:

$('# foo'). attr ( "onclick", "javascript: alert ('foo');" );

Ответ 10

Приведенный выше пример YUI должен быть:

<script>
  YAHOO.util.Event.onDOMReady(function() {   
     Dom.get("foo").onclick =  function (){alert('foo');};
  });
</script>

Ответ 11

Я думаю, вы хотите использовать jQuery . bind и . unBind. В моем тестировании изменение события click с использованием .click и .onclick на самом деле называется вновь назначенным событием, что приводит к бесконечному циклу.

Например, если события, которые вы переключаете между hide() и unHide(), и нажатие на один переключает событие клика на другое, вы попадете в непрерывный цикл. Лучше всего было бы сделать это:

$(element).unbind().bind( 'click' , function(){ alert('!') } );

Ответ 12

Никто не рассматривал фактическую проблему, которая происходила, чтобы объяснить, почему было выпущено предупреждение.

Этот код: document.getElementById("foo").click = new function() { alert('foo'); }; присваивает свойство click элемента #foo пустому объекту. Анонимная функция здесь предназначена для инициализации объекта. Мне нравится думать об этом типе функции как о конструкторе. Вы помещаете предупреждение там, поэтому его вызывают, потому что функция вызывается немедленно.

См. этот вопрос.