0

我似乎无法弄清楚这一点。您可以在这里查看我到目前为止所做的示例：http: //jsfiddle.net/aCUQC/1/

当用户进行搜索时，会出现一个“x”。点击“x”提交表格。

我可以“提交”表格；但是，我无法让它读取输入文本值！

HTML如下：

<link rel="stylesheet" href="//code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
<script src="//code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<br />
<br />
<div data-role="collapsible" data-collapsed="false" data-mini="true" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" data-theme="x">
    <form method="GET" action="search.do" data-ajax="false" style="height: 40px;" id="smartSearch">
        <input data-inline="true" type="text" data-type="search" data-corners="false" name="q" placeholder="Type Name Here (e.g. John Smith)" data-mini="true" autocomplete="off" />
    </form>
</div>


JS：

$('#smartSearch').on('click', '.ui-input-clear', function (e) {
    e.preventDefault(); // prevent the link's default behaviour
    $('form#smartSearch').submit(); 
});



感谢您的帮助！谢谢！

4

1 回答 1

0

1）您的目标是错误的图标 - 要定位的正确图标是.ui-icon-delete- 您正在阻止不正确元素的行为。

2）你需要实际做一些事情来获得价值。这就是 jQuery 的.val()派上用场的地方。

这是一些针对正确图标的更新代码。我使用 return false 而不是防止默认值。

$("#smartSearch .ui-icon-delete").click(function() {
    var text = $("input").val();
    alert(text);
    $('form#smartSearch').submit(); 
    return false;
});

演示：http: //jsfiddle.net/aCUQC/3/

如果您对 return false 和 prevent default 之间的区别感兴趣，可以阅读此内容。

于 2013-08-08T16:40:18.837 回答