JavaScript:изменение значения onclick с помощью jQuery или без него
-
05-07-2019 - |
Вопрос
Я хотел бы изменить значение 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!);
Если вы на самом деле не хотите переходить на новую страницу, вы также можете разместить якорь где-нибудь на странице, как показано ниже.
<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>
Надеюсь это поможет