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

StackOverflow https://stackoverflow.com/questions/826628

Вопрос

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

Решение

Вы не должны использовать 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() конструкторы

Другие советы

Кстати, без 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

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

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

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

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

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

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

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

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

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top