Jquery更改按钮值不起作用

Question

我已经挣扎了几个小时,我无法获得以下代码;

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

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

并记住文档就绪功能,或在底部添加代码.

Answer 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(),则不会遵循链接并且不会单击按钮.

让我们摆脱苦难吧.