JavaScript: изменение значения onclick с или без jQuery - PullRequest
Новая
       47

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

48 голосов
/ 05 мая 2009

Я бы хотел изменить значение атрибута 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>

Ответы [ 7 ]

74 голосов
/ 06 мая 2009

Вы не должны больше использовать 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 from a string".

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

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

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

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

3 голосов
/ 05 ноября 2009

Кстати, без JQuery это тоже можно сделать, но, очевидно, это довольно уродливо, поскольку учитывает только IE / non-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

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

0 голосов
/ 05 ноября 2009

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

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

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

0 голосов
/ 02 ноября 2009

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

<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>
0 голосов
/ 02 ноября 2009

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

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

0 голосов
/ 06 мая 2009

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

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

0 голосов
/ 05 мая 2009

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

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

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

...