JQuery 移动搜索输入图标答案

【问题标题】：JQuery mobile Search inputs IconJQuery 移动搜索输入图标
【发布时间】：2011-01-11 00:20:20
【问题描述】：

我想知道将这个放大镜图标变成可点击按钮的最佳方法是什么？无需更改 JQuery 框架

http://jquerymobile.com/demos/1.0a2/#docs/forms/forms-search.html

这是它在框架中的映射位置

if( input.is('[type="search"],[data-type="search"]') 
focusedEl = input.wrap('<div class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-search'+ themeclass +'"></div>').parent();

【问题讨论】：

标签： jquery jquery-mobile

【解决方案1】：

使用 javascript hack 做任何事情都会破坏整个 progressive enhancement 想法。

只需创建一个普通的提交按钮并用<span class="maglass"> 包装它，然后在末尾用!important 创建一些CSS 规则，以覆盖jqm 创建的元素的jQuery Mobile 按钮样式以替换提交按钮（检查它用萤火虫来掌握那里创造的东西）最后——如果你想让 tit 在支持一半的浏览器中看起来不错，你将不得不获得其中一个并添加另一个 CSS 规则。

完成。有不支持的浏览器的按钮，它通过 CSS 增强为放大镜。无处不在。

【讨论】：

【解决方案2】：

我可以说它是一个以输入元素为主题的 div。话虽如此，您可能可以做以下两件事之一：

绑定到输入的包装器，例如：

$('__INPUT_SELECTOR__') // grab the input field
  .closest('div')       // traverse up to the parent div
  .bind('click',function(){
    // grab the click event and make it a form submit
    $(this).closest('form').submit();
  });

或者，你去另一个方向：

$('div.ui-input-search') // find the div first
  .bind('click',function(){
    // now you have a click event on the div. Transfer it to the form's submit
    $(this).closest('form').submit();
  });

只是取决于你想去的方向。（并且可能应该使用 jquerymobile 事件，而不是经典的 jQuery 事件（这样你就可以捕捉到 figner 的点击等））另外，这应该被解释为 pseudo-code 因为我不熟悉图书馆，就我所知道的。

编辑
所以很明显，我意识到必须为 DIV 的点击事件做更多的工作（在检查方面）。您需要测试点击实际上是在 DIV 上执行的，而不是导致 DIV 事件触发的输入。
只需将其扔到那里以避免“这不起作用”cmets。这就是为什么它是伪代码。

【讨论】：