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

【问题标题】：how to get the clear event of search box in jquery-mobile如何在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" />

【问题讨论】：

标签： jquery jquery-mobile jquery-plugins

【解决方案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/

【讨论】：