如何在jquery-mobile中获取搜索框的清除事件

Posted 2023-05-09

【中文标题】如何在jquery-mobile中获取搜索框的清除事件

【英文标题】：how to get the clear event of search box in jquery-mobile

【发布时间】：2013-07-11 07:36:38

【问题描述】：

定义一个搜索框 如果输入框有文字，输入框会显示清除按钮，如何获取清除按钮的点击事件？

<label for="search-mini">Search Input:</label>
<input type="search" name="search-mini" id="search-mini" value="" data-mini="true" />

【参考方案1】：

type=search 的输入通过具有 ui-input-clear 类的清晰 <a> 锚按钮得到增强。您可以按如下方式将事件附加到该按钮。

Demo

$(document).on('click', '.ui-input-clear', function () 
  alert('text cleared');
);

【讨论】：

就像一个魅力。我想知道为什么只是 $('.ui-input-clear').click(function() // 一些代码);不工作。

@rDroid 因为它是动态创建的，因此您需要委托该事件。您上面的代码可以被包裹在pagecreate 事件中，但是您应该指定页面以避免多个监听器。

【参考方案2】：

只需使用 jQuery 附带的 .click() 侦听器即可。示例：

$('#clear-button').click(function()
    $('#search-box').val('');
    // OR WHATEVER OTHER CODE YOU WANT TO RUN WHEN BUTTON IS CLICKED
);

假设你的按钮的“id”属性是“clear-button”。

希望这会有所帮助。

【参考方案3】：

对 Omar 的回答稍作改进，您可以使用选择器获得更具体的信息，这样事件就不会使用 ui-input-clear 类监听每个元素。

Demo

html：

<div id="search-container">
    <label for="search-mini">Search Input:</label>
    <input type="search" name="search-mini" id="search-mini" value="" data-mini="true" />
</div>

JS：

$(document).on('click', '#search-container .ui-input-clear', function () 
  alert('text cleared');
);

【参考方案4】：

使用.click() 和.val()：

javascript：

$(function()
    $('#clear').click(function()
        $('#search').val('');
    );
);

HTML：

<input type="text" id="search" />
<button id="clear">Clear</button>

演示： http://jsfiddle.net/dirtyd77/KPZMQ/