JavaScript: changing the value of onclick with or without jQuery(JavaScript:使用或不使用 jQuery 更改 onclick 的值)

本文介绍了JavaScript:使用或不使用 jQuery 更改 onclick 的值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想更改锚点上 onclick 属性的值.我想将其设置为包含 JavaScript 的新字符串.(该字符串由服务器提供给客户端 JavaScript 代码，它可以包含您可以放入 HTML 中的 onclick 属性中的任何内容.)以下是我尝试的一些操作:

I'd like to change the value of the onclick attribute on an anchor. I want to set it to a new string that contains JavaScript. (That string is provided to the client-side JavaScript code by the server, and it can contains whatever you can put in the onclick attribute in HTML.) Here are a few things I tried:

  • 使用 jQuery attr("onclick", js) 不适用于 Firefox 和 IE6/7.
  • 使用 setAttribute("onclick", js) 适用于 Firefox 和 IE8，但不适用于 IE6/7.
  • 使用 onclick = function() { return eval(js);} 不起作用，因为您不允许使用 return 是传递给 eval() 的代码.
  • Using jQuery attr("onclick", js) doesn't work with both Firefox and IE6/7.
  • Using setAttribute("onclick", js) works with Firefox and IE8, but not IE6/7.
  • Using onclick = function() { return eval(js); } doesn't work because you are not allowed to use return is code passed to eval().

有人建议设置 onclick 属性以使其适用于 Firefox 和 IE 6/7/8?另请参阅下面我用来测试的代码.

Anyone has a suggestion on to set the onclick attribute to to make this work for Firefox and IE 6/7/8? Also see below the code I used to test this.

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

推荐答案

如果你使用 jQuery，你不应该再使用 onClick.jQuery 提供了自己的附加和绑定事件的方法.请参阅 .click()

You shouldn't be using onClick any more if you are using jQuery. jQuery provides its own methods of attaching and binding events. See .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".

That should cancel the onClick function - and keep your "javascript from a string" as well.

最好的办法是从 HTML 代码中的 <a> 元素中删除 onclick="" 并切换到使用 Unobtrusive 将事件绑定到点击的方法.

The best thing to do would be to remove the onclick="" from the <a> element in the HTML code and switch to using the Unobtrusive method of binding an event to click.

你也说过:

使用 onclick = function() { return eval(js);} 不起作用，因为您不允许在传递给 eval() 的代码中使用 return.

Using onclick = function() { return eval(js); } doesn't work because you are not allowed to use return in code passed to eval().

不 - 它不会，但是 onclick = eval("(function(){"+js+"})"); 会将 'js' 变量包装在函数外壳中.onclick = new Function(js); 也可以，而且阅读起来更简洁.(注意大写 F)——参见 关于 Function() 的文档构造函数

No - it won't, but onclick = eval("(function(){"+js+"})"); will wrap the 'js' variable in a function enclosure. onclick = new Function(js); works as well and is a little cleaner to read. (note the capital F) -- see documentation on Function() constructors

这篇关于JavaScript:使用或不使用 jQuery 更改 onclick 的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！