javascript 在 jQuery 移动按钮上调用 button("refresh") 会破坏按钮样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15259955/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Calling button("refresh") on a jQuery mobile button breaks the button style
提问by gerrod
I'm trying to dynamically update the text on a jQuery mobile button. The button is actually a link which is styled as a button.
我正在尝试动态更新 jQuery 移动按钮上的文本。该按钮实际上是一个样式为按钮的链接。
According to the jQuery mobile documentation, you should call button("refresh")if you manipulate the button via javascript. However, when I do this, the button's style goes a but crazy - it gets shrunk to half-height and the button looks crap.
根据jQuery mobile 文档，button("refresh")如果您通过 javascript 操作按钮，则应该调用。然而，当我这样做时，按钮的样式变得非常疯狂——它缩小到一半高度，按钮看起来很糟糕。
Here's a JS Fiddle which demonstrates the problem.
The code is essentially as follows:
代码基本如下：
$(function() {
// Buttonize
var $button = $("#myCrapButton");
$button.button();
// Change text on click
$button.click(function() {
$button.text("Awesome Button");
$button.button("refresh");
});
});
What's more, calling button("refresh")causes the javascript error: Cannot call method 'removeClass' of undefined.
更重要的是，调用button("refresh")导致JavaScript错误：Cannot call method 'removeClass' of undefined。
I know that I can work around this problem by manipulating the .ui-btn-textspanthat's nested inside the button; however, this seems like the wrong approach as it requires explicit knowledge of the internal workings of jquery Mobile.
我知道我可以通过操作.ui-btn-textspan嵌套在按钮内的来解决这个问题；然而，这似乎是错误的方法，因为它需要明确了解 jquery Mobile 的内部工作原理。
Can anyone tell me how to get the refresh call to work?
谁能告诉我如何让刷新调用工作？
Using versions:
使用版本：
- jQuery 1.9.1
- jQuery Mobile 1.3.0 (in the JSFiddle it's 1.3.0 beta but the final has the same behavior).
- jQuery 1.9.1
- jQuery Mobile 1.3.0（在 JSFiddle 中它是 1.3.0 beta，但最终具有相同的行为）。
Thanks!
谢谢！
采纳答案by Phill Pafford
EDIT:
编辑：
Sorry read to fast and didn't see that you were looking specifically for the refresh functionality. As you hav noticed jQM doesn;t offer that on the anchor tag buttons.
抱歉，读得太快了，没有看到您专门寻找刷新功能。正如您所注意到的，jQM 没有在锚标记按钮上提供该功能。
Well an alternative is just to replace the button with a new one and let jQM add the markup as before
好吧，另一种方法是用新按钮替换按钮，然后让 jQM 像以前一样添加标记
JS
JS
$(function() {
// Buttonize
var $button = $("#myCrapButton");
var $clone = $button.clone();
$button.button();
// Change text on click
$button.click(function() {
$clone.text("Awesome Button");
$clone.button();
$button.replaceWith($clone);
});
});
Hope this helps!
希望这可以帮助！
Original:
原来的：
You just need to drill down into the added markup that jQM adds.
您只需要深入了解 jQM 添加的添加标记。
<a id="myCrapButton" href="#" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c">
<span class="ui-btn-inner">
<span class="ui-btn-text">
Click me!
</span>
</span>
</a>
You're changing the button text:
您正在更改按钮文本：
<a id="myCrapButton" href="#" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c">
Awesome Button
</a>
Doing this you loose the added markup jQM needs to display the button. You need to change the nested span text.
这样做会丢失 jQM 显示按钮所需的添加标记。您需要更改嵌套的跨度文本。
$(function() {
// Buttonize
var $button = $("#myCrapButton");
$button.button();
// Change text on click
$button.click(function() {
$button.children().children().text("Awesome Button");
});
});
no refresh needed:
无需刷新：
<a id="myCrapButton" href="#" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c">
<span class="ui-btn-inner">
<span class="ui-btn-text">
Awesome Button
</span>
</span>
</a>
Live Example:
现场示例：
回答by gerrod
Never mind; just found this at the top of the documentation:
没关系; 刚刚在文档的顶部找到了这个：
Note: Links styled like buttons have all the same visual options as true form-based buttons below, but there are a few important differences. Link-based buttons aren't part of the button plugin and only just use the underlying buttonMarkup plugin to generate the button styles so the form button methods (enable, disable, refresh) aren't supported. If you need to disable a link-based button (or any element), it's possible to apply the disabled class ui-disabled yourself with JavaScript to achieve the same effect.
注意：按钮样式的链接与下面的基于表单的按钮具有所有相同的视觉选项，但有一些重要的区别。基于链接的按钮不是按钮插件的一部分，只是使用底层的 buttonMarkup 插件来生成按钮样式，因此不支持表单按钮方法（启用、禁用、刷新）。如果您需要禁用基于链接的按钮（或任何元素），可以使用 JavaScript 自己应用 disabled 类 ui-disabled 以达到相同的效果。
Although this doesn't actually solve my problem (of how to update the button text) - at least it answers why the "refresh" method isn't supported.
虽然这实际上并没有解决我的问题（如何更新按钮文本） - 至少它回答了为什么不支持“刷新”方法。
Edit:
编辑：
I am aware that I can directlyupdate the text on the button; I said as much in the original question:
我知道我可以直接更新按钮上的文本；我在最初的问题中说了同样多的话：
I know that I can work around this problem by manipulating the .ui-btn-text span that's nested inside the button; however, this seems like the wrong approach as it requires explicit knowledge of the internal workings of jquery Mobile.
我知道我可以通过操作嵌套在按钮内的 .ui-btn-text 跨度来解决这个问题；然而，这似乎是错误的方法，因为它需要明确了解 jquery Mobile 的内部工作原理。
I was hoping to avoid this solution by somehow getting the "refresh" method to work. However, based on the snippet of documentation that I later found (and have quoted above), I realised that using the "refresh" method was not an option.
我希望通过某种方式使“刷新”方法起作用来避免这种解决方案。但是，根据我后来找到的（并在上面引用的）文档片段，我意识到使用“刷新”方法不是一种选择。
Given that; I was still hoping there was another way to update the text on the button without explicitly addressing the generated DOM elements (i.e. by using the jQM API) - but so far as I can see, there's no API method to do so. Updating the DOM elements seems like the only way to achieve the desired result.
鉴于; 我仍然希望有另一种方法来更新按钮上的文本而不显式处理生成的 DOM 元素（即通过使用 jQM API） - 但据我所知，没有 API 方法可以这样做。更新 DOM 元素似乎是实现预期结果的唯一方法。
Both of the selectors provided by @Phil Pafford ($(this).find('span span')) and @OmarNew2PHP ($button.children().children()) are (in my opinion) incorrect. Yes, they work perfectly in the example given above, however, if you add an icon to the button:
@Phil Pafford ( $(this).find('span span')) 和 @OmarNew2PHP ( $button.children().children())提供的两个选择器（在我看来）都是不正确的。是的，它们在上面给出的示例中完美运行，但是，如果您向按钮添加图标：
<a id="myCrapButton" href="#" data-icon="delete">Click me!</a>
Then jQM adds in an additional spanto display that icon (anchor tag attributes trimmed for brevity):
然后 jQM 添加一个额外的span以显示该图标（为简洁起见，修剪了锚标记属性）：
<a href="#">
<span class="ui-btn-inner">
<span class="ui-btn-text">Delete</span>
<span class="ui-icon ui-icon-delete ui-icon-shadow"> </span>
</span>
</a>
Using the selectors above will add the text to bothof the inner spantags. This is another example of why I was hoping to avoid updating the DOM directly - because you can't (and shouldn't have to) predict what jQM is going to generate.
使用上面的选择器会将文本添加到两个内部span标签中。这是为什么我希望避免直接更新 DOM 的另一个示例 - 因为您不能（也不应该）预测 jQM 将生成什么。
But, at the end of the day, it looks like the best way of updating the text inside the button is using the method I was hoping to avoid:
但是，归根结底，更新按钮内文本的最佳方法似乎是使用我希望避免的方法：
$button.click(function() {
$(".ui-btn-text", this).text("Awesome Button");
});
Thanks for your answers.
感谢您的回答。
回答by HITESH PATEL
I spent hours on this and finally this worked for me. Kind of clean solution. So, if you have a javascript which is creating following html within an element
我花了几个小时在这上面，最后这对我有用。一种干净的解决方案。因此，如果您有一个 javascript 在元素中创建以下 html
<div id="buttonParent">
<a href='#' id="1_button" data-role="button">Click me</a>
<a href='#' id="2_button" data-role="button">Another Click me</a>
</div>
then calling below will refresh the buttons.
然后调用下面将刷新按钮。
jQuery('#buttonParent').trigger('create');
Please note below was not working and was giving exceptions.
请注意，下面不起作用，并给出了例外。
jQuery('#1_button').button('refresh')
May help someone else like me. It was a shear waste of time. jqm needs to fix this bug. I had a wrapper around these button for a collapsibleset and refresh on that worked fine but this refresh on button kept throwing errors. It was very annoying.
可以帮助像我这样的人。这简直是浪费时间。jqm 需要修复这个错误。我在这些按钮周围有一个包装器，用于可折叠集并刷新它工作正常，但刷新按钮不断抛出错误。这很烦人。
