Jquery更改按钮值不起作用答案

【问题标题】：Jquery change button value not workingJquery更改按钮值不起作用
【发布时间】：2013-05-17 22:04:33
【问题描述】：

我已经苦苦挣扎了几个小时，但无法让以下代码工作；

<li>
<img width="100px" height="100px" src="$profile_picture">
<p>Username: $username</p>
<p>UserID: $userid</p>
<p>Bio: $bio</p>
<p>Website: $website</p>
<input type="button" value="Block" data-role="button" id="myButton"/>
</li>
<li data-role="list-divider"></li>

我想将按钮的值更改为“被阻止”，这是我的 javascript：

<script type="text/javascript">
$("input[type='button']").toggle(function () {
    $(this).val("Block");
}, function () {
    $(this).val("Blocked");
});
</script>

我正在使用以下版本的 jquery 和 jqm：

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

知道为什么这不能正常工作吗？非常感谢所有帮助...TKS！

【问题讨论】：

您正在使用从 jQuery 1.9 开始删除的函数（在 1.8 中已弃用）：api.jquery.com/toggle-event
@MarkSchultheiss - 我不知道你在说什么，但是是的，切换事件已被删除。然而，切换动画方法仍然存在。阅读我评论中的链接。
我想我的眼睛交叉了。没关系。

标签： jquery html dom jquery-mobile

【解决方案1】：

以这种方式使用的 toggle() 函数在 jQuery 1.8 中已被弃用，并在 1.9 中被删除

$("#myButton").on('click', function(){
    $(this).val(function(i,val) {
        return val=='Block' ? 'Blocked' : 'Block';
    });
});

而且你应该在移动之前加载 jQuery：

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

并记住文档准备功能，或者在底部添加代码。

【讨论】：

总是打字更快... +1
我在移动之前加载了jQuery，只是在这里粘贴错了，tks！
注意你应该小心使用document.ready来运行你的代码，因为jQuery Mobile默认使用一个AJAX导航模型，它更多地依赖于pageinit（等等）：api.jquerymobile.com/category/events
@Jasper - 这是一个有效的观点，jQ Mobile 使用 pageinit 事件。
@Tuga - 不知道为什么它不适合你，它似乎对我来说很好，这是一个FIDDLE ??

【解决方案2】：

您正在使用的 toggle 函数在 jQuery 版本 1.9 中被删除（版本已弃用：1.8，已删除：1.9）

http://api.jquery.com/toggle-event/

您可以通过在 click 处理程序上实现此功能并切换值来实现相同的目的。

为什么要删除它？ [版本 1.9]

http://jquery.com/upgrade-guide/1.9/#toggle-function-function-removed

这是.toggle() 的“单击元素运行指定函数”签名。它不应与.toggle() 的“更改元素的可见性”相混淆，后者未被弃用。前者被删除以减少混淆并提高库中模块化的潜力。 jQuery Migrate 插件可用于恢复功能。

为什么不推荐使用它？ [版本 1.8]

http://bugs.jquery.com/ticket/11786

您知道我们有两个 .toggles 吗？我们喜欢的那个会根据需要执行 .show 或 .hide，并记录在 http://api.jquery.com/toggle/。另一个设置循环 .click 处理程序，并记录在 http://api.jquery.com/toggle-event/:

提供 .toggle() 方法是为了方便。手动实现相同的行为相对简单，如果 .toggle() 内置的假设证明是有限的，这可能是必要的。例如，如果将 .toggle() 应用于同一元素两次，则不能保证正常工作。由于 .toggle() 内部使用了一个点击处理程序来完成它的工作，我们必须解除对点击的绑定以移除一个附加在 .toggle() 的行为，这样其他的点击处理程序就可以在交火中被捕获。该实现还在事件上调用 .preventDefault() ，因此如果在元素上调用了 .toggle() ，则不会跟踪链接并且不会单击按钮。

让我们摆脱痛苦吧。

【讨论】：

是什么问题导致它被删除？
它与切换可见性等的 toggle() 函数太相似了。
@Tuga 如果有帮助，我制作了一个 jQ 插件来替换此功能。当然它被称为toggleMethod 并且可以很容易地从那个小提琴复制到一个 js 文件中。将链接放在 jQuery 链接之后的头部，你就可以开始了。使用就像$("element").toggleMethod(function(e) { /* DO WORK */ }, function(e) { /* DO WORK */ }); 一样简单

【解决方案3】：

除了大家所说的，你可以用稍微不同的方式使用另一个切换

 <input type="button" value="Block" data-role="button" class="myButton"/>
 <input type="button" value="Blocked" data-role="button" class="myButton" style="display:none;"/>

和

$(".myButton").on('click', function (){
    $('.myButton').toggle()
});

【讨论】：