JavaScript: изменение значения onclick с jQuery или без него

Я хотел бы изменить значение атрибута onclick на якоре. Я хочу установить новую строку, содержащую JavaScript. (Эта строка предоставляется клиентскому коду JavaScript сервером и может содержать все, что вы можете поместить в атрибут onclick в HTML.) Вот несколько вещей, которые я пробовал:

  • Использование jQuery attr("onclick", js) не работает ни с Firefox, ни с IE6/7.
  • Использование setAttribute("onclick", js) работает с Firefox и IE8, но не с IE6/7.
  • Использование onclick = function() { return eval(js); } не работает, потому что вам не разрешено использовать return, если код передается в eval().

У кого-нибудь есть предложение установить атрибут onclick, чтобы это работало для Firefox и IE 6/7/8? Также см. ниже код, который я использовал для проверки этого.

<html>
    <head>
        <script type="text/javascript"
                src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                var js = "alert('B'); return false;";
                // Set with JQuery: doesn't work
                $("a").attr("onclick", js);
                // Set with setAttribute(): at least works with Firefox
                //document.getElementById("anchor").setAttribute("onclick", js);
            });
        </script>
    </head>
    <body>
        <a href="http://www.google.com/" id="anchor" onclick="alert('A'); return false;">Click</a>
    </body>
</html>

javascript jquery attributes onclick
person Community    schedule 05.05.2009    source источник
comment
с или с jQuery вы хотели бы jQuery с этим jQuery?   -  person Sam Hasler    schedule 05.05.2009
comment
Я предположил, что ОП хотел использовать jQuery, пока он выполнял jQuery.   -  person ObscureRobot    schedule 01.12.2011

Ответы (7)


arrow_upward
74
arrow_downward

Вам больше не следует использовать onClick, если вы используете jQuery. jQuery предоставляет свои собственные методы присоединения и привязки событий. См. .click().

$(document).ready(function(){
    var js = "alert('B:' + this.id); return false;";
    // create a function from the "js" string
    var newclick = new Function(js);

    // clears onclick then sets click using jQuery
    $("#anchor").attr('onclick', '').click(newclick);
});

Это должно отменить функцию onClick и сохранить ваш «javascript из строки».

Лучше всего удалить onclick="" из элемента <a> в HTML-коде и переключиться на использование < strong>Ненавязчивый метод привязки события к клику.

Вы также сказали:

Использование onclick = function() { return eval(js); } не работает, потому что вам не разрешено использовать return в коде, переданном в eval().

Нет, не будет, но onclick = eval("(function(){"+js+"})"); поместит переменную js в оболочку функции. onclick = new Function(js); тоже работает, и читать его немного чище. (обратите внимание на заглавную F) -- см. документацию по Function() конструкторам

person Community    schedule 05.05.2009
comment
attr('onclick', '') не работает, вам нужно использовать removeAttr('onclick') - person David Lawson; 03.01.2011
comment
Остерегайтесь и этого: jQuery unbind() vs removeAttr() см. novogeek.com/post/2009/05/18/ - person benjaminlotan; 06.03.2011

arrow_upward
3
arrow_downward

Кстати, без JQuery это тоже можно было бы сделать, но, очевидно, это довольно уродливо, поскольку учитывает только IE/не-IE:

if(isie)
   tmpobject.setAttribute('onclick',(new Function(tmp.nextSibling.getAttributeNode('onclick').value)));
else
   $(tmpobject).attr('onclick',tmp.nextSibling.attributes[0].value); //this even supposes index

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

person Community    schedule 04.11.2009

arrow_upward
0
arrow_downward

Одна ошибка с Jquery заключается в том, что функция щелчка не подтверждает ручной код onclick из html.

Так что выбирать придется довольно сильно. Настройте все свои обработчики в функции инициализации или все их в html.

Событие щелчка в JQuery — это функция щелчка $("myelt").click (функция ....).

person Community    schedule 05.05.2009
comment
Том, я не могу использовать $(myelt).click() здесь, потому что код, который я хочу запустить, находится в строке. (См. также мои комментарии к другим ответам здесь.) - person avernet; 06.05.2009
comment
Ах. Я вижу, как насчет: function js() { alert('B'); вернуть ложь; } - person Tom Hubbard; 06.05.2009

arrow_upward
0
arrow_downward

просто используйте метод привязки jQuery !jquery-selector!.bind('event', !fn!);

Подробнее о событиях в jQuery см. здесь

person Community    schedule 05.05.2009

arrow_upward
0
arrow_downward

Если вы не хотите на самом деле переходить на новую страницу, вы также можете разместить якорь где-нибудь на странице, как здесь.

<a id="the_anchor" href="">

А затем, чтобы назначить свою строку JavaScript для щелчка привязки, поместите это где-нибудь еще (например, в заголовок, позже в тело, что угодно):

<script>
    var js = "alert('I am your string of JavaScript');"; // js is your string of script
    document.getElementById('the_anchor').href = 'javascript:' + js;
</script>

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

<a href="javascript:alert('I am your script.'); alert('So am I.');">Click me</a>
person Community    schedule 02.11.2009

arrow_upward
0
arrow_downward

Обратите внимание, что следующую идею gnarf вы также можете сделать:

var js = "alert('B:' + this.id); return false;";<br/>
var newclick = eval("(function(){"+js+"});");<br/>
$("a").get(0).onclick = newclick;

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

person Community    schedule 04.11.2009

arrow_upward
-3
arrow_downward

Придумал быстрое и грязное решение для этого. Только что использовал <select onchange='this.options[this.selectedIndex].onclick();> <option onclick='alert("hello world")' ></option> </select>

Надеюсь это поможет

person Community    schedule 02.11.2009
comment
Ммм... извините, но я не понимаю, как это ответ на исходный вопрос. - person avernet; 03.11.2009