代码之家 › 专栏 › 技术社区 › guitsaru

javascript:使用或不使用jquery更改onclick的值

attributes onclick jquery javascript

guitsaru · 技术社区 · 7 年前

我想改变 onclick 锚上的属性。我想将其设置为包含javascript的新字符串。(该字符串由服务器提供给客户端的javascript代码,它可以包含可以放入 点击 属性为html。)我尝试了以下几点:

使用jQuery attr("onclick", js) 不能同时使用火狐和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 回复 | 直到 12 年前

gnarf 15 年前

你不应该使用 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);
});

应该取消 点击 函数-并保持您的“javascript从一个字符串”以及。

最好的办法是移除 onclick="" 从 <a> 元素,并切换到使用 Unobtrusive 绑定要单击的事件的方法。

你也说过:

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

不-不会,但是 onclick = eval("(function(){"+js+"})"); 将“js”变量包装在函数外壳中。 onclick = new Function(js); 也能用,而且读起来有点干净。(注意大写F)--参见 documentation on Function() constructors

Eduardo 16 年前

顺便说一句,如果没有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

不管怎样,只是为了让人们对可以做的事情有一个全面的了解,因为我相信很多人都是偶然发现了这种烦恼。

Tom Hubbard 16 年前

jquery的一个优点是,click函数不确认来自HTML的手工编码onclick。

所以,你必须做出选择。在init函数中设置所有处理程序,或者在html中设置所有处理程序。

jquery中的click事件是click函数$(“myelt”)。click(函数…..)。

Ilya Khaprov 16 年前

只需使用jquery绑定方法!jquery选择器!.bind(“事件”,!FN!);

See here for more about events in jQuery

ntownsend 16 年前

如果你不想实际导航到一个新的页面,你也可以在页面的某个地方这样定位。

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

David A Gibson 12 年前

请注意,根据gnarf的想法,您也可以这样做:

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

这将在不触发事件的情况下设置onclick(这里有相同的问题,我花了一些时间才发现)。

-3

Afterburner 16 年前

想出了一个快速和肮脏的解决办法。刚刚使用 <select onchange='this.options[this.selectedIndex].onclick();> <option onclick='alert("hello world")' ></option> </select>

希望这有帮助