Jquery UI Mobile 为表单返回空值

Question

我似乎无法弄清楚这一点。您可以在此处查看我迄今为止所做的示例：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(); 
});

感谢您的帮助！谢谢！

Answer 1

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 之间的区别感兴趣，可以阅读this。