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="#" onclick="location.href='http://www.google.com/'; return false;" id="anchor" onclick="alert('A'); return false;">Click</a>
    </body>
</html>

Ответы

Ответ 1

Вам больше не следует использовать 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-коде и переключиться на Ненавязчивый для привязки события к клику.

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

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

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

Ответ 2

BTW, без 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

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

Ответ 3

Один из них с JQuery заключается в том, что функция click не распознает handcoded onclick из html.

Итак, вам в значительной степени нужно выбирать. Настройте все ваши обработчики в функции init или все из них в html.

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

Ответ 5

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

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

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

<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>

Ответ 6

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

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

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

Ответ 7

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

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