用jQuery修改onclick函数答案

【问题标题】：Modify onclick function with jQuery用jQuery修改onclick函数
【发布时间】：2011-02-10 23:00:58
【问题描述】：

我有一个按钮，其中有一个 onclick 事件，它是在 .NET 的后端设置的。旁边是一个复选框

<button class="img_button" onclick="if(buttonLoader(this)){WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions('uxBtnRelease', '', true, '', 'somepage.aspx?oupid=5&fp=true', false, true))} return false;" type="button">Release</button>
<input type="checkbox" checked="checked" id="myCheckbox">

当复选框被点击时，需要在按钮的onclick函数里面改变URL中查询字符串的值。

到目前为止，我有这个，想法是正确的，但是运行时我不断收到错误：“Uncaught SyntaxError: Unexpected token ILLEGAL”

var defaultReleaseOnClick=null;
$("#myCheckbox").click(function(){
    var $releaseBtn = $(".img_button");
    if(defaultReleaseOnClick==null) defaultReleaseOnClick=$releaseBtn.attr("onclick");

    var newOnClickString =  defaultReleaseOnClick.toString().replace(/&fp=[a-z]+'/i,"&fp="+this.checked);
    $releaseBtn.removeAttr("onclick").click(eval(newOnClickString));
});

我知道将函数转换为字符串，进行替换，然后尝试将其转换回函数似乎有点 hacky，但我不知道有任何其他方法。

有什么想法吗？

我在这里设置了一个演示：http://jsbin.com/asiwu4/edit

【问题讨论】：

服务器设置的功能是否已知？然后只需阻止默认点击事件并执行具有调整值的已知点击事件。如果不是，那么您的解决方案似乎是最好的（不是一个好的解决方案，但它有效）。

标签： javascript jquery function onclick

【解决方案1】：

为什么不使用 data-* 属性？例如：

<button ... onclick="doStuff(this);" data-url="something.aspx"></button>

现在，在您的 doStuff() 函数（或您的 onclick 属性中的任何内容）中，您从 data-url 属性中读取数据，并在您的 checkbox.click 事件中相应地更改它。这样您就不必使用正则表达式来修改您的 JavaScript 代码，这是我不会真正推荐给任何人的东西。

从 jQuery 1.4.3 开始，您甚至不必处理 jQuery.attr 来读取 data-* 属性，但您可以使用 jQuery.data 自动为您检索数据（您也可以设置它这样）。

一个简单的例子：

<input type="submit" id="button" data-url="google.com">
<input type="checkbox" id="checkbox"> 

$('#button').click(function() {
    alert($(this).data('url')); 
});

$('#checkbox').click(function() {
    $('#button').data('url', 'bing.com');
});

http://jsfiddle.net/dSEpR/

另一个建议：Read up on Unobtrusive JavaScript with jQuery，这项技术让我的网络开发人员生活变得更加轻松:)

【讨论】：

【解决方案2】：

您不能用新的 fp 值更新隐藏的表单元素吗？

<input type='hidden' name='fp' value='whatever' />

这样，您发布表单的代码可以更通用一些。

【讨论】：

【解决方案3】：

我实际上找到了一个更简单的解决方案。我将在页面上呈现两个不同的按钮，每个按钮都包含所需的脚本。复选框的状态只会决定哪一个是可见的被点击。

【讨论】：