JQuery 移动搜索输入图标

Question

我想知道使这个放大镜图标成为可点击按钮的最佳方法是什么？ 无需更改 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();

Answer 1

使用 javascript hack 做任何事情都会破坏整个渐进增强想法。

只需创建一个普通的提交按钮并用 包裹它，然后在最后使用 !important 创建一些 CSS 规则来覆盖jqm 创建的元素的 jQuery Mobile 按钮样式用于替换提交按钮（使用 firebug 检查它以掌握其中创建的内容）
最后 - 如果你想让 tit 在支持一半的浏览器中看起来不错，你将必须获得其中一个并添加另一个 CSS 规则。

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

Answer 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 Taps等））此外，这应该被解释为伪代码，因为我不熟悉图书馆，只是用我所知道的。

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