单击时删除搜索操作（未完成操作）

Question

我创建了一个搜索表单，在点击搜索图标时会打开搜索字段。

所以我关闭了搜索功能，因此图标可以点击。

var $searchBtn = $search.find('button');
$searchBtn.on('click', function(e) {
                    e.preventDefault();
                });

但是现在，如果我在点击搜索图标

时返回搜索功能

$('.icon-search'.on('click', function(e)
{
    $searchBtn.unbind('click');
});

我不能再点击十字架来关闭搜索字段了，因为它再次获得了搜索功能。

所以我的问题是：

是否可以点击我的.icon-cross e.preventDefault();而不先完成搜索功能？

HTML代码：

<form method="GET" action="search" class="form-inline">

    <div class="input-group">

        <input type="search" name="query" id="query" class="form-control" placeholder="'Uw zoekopdracht...">
        {/if}">

        <span class="input-group-btn">
            <button class="btn btn-default icon-search" type="submit"></button>
        </span>

    </div>

</form>

Answer 1

您使用相同的按钮执行两项操作。您可以选择使用两个不同的按钮并切换显示。不用担心附加什么代码，因为它们是分开的。

您可以添加一个可以处理这两个任务的点击事件

$searchBtn.on('click', function(e) {
    e.preventDefault();
    if ($(this).hasClass("icon-search")) {
        //search logic
    } else {
       //cross logic
    }
});

或者您可以使用事件委派来处理点击（在封面下进行上述检查）;

$searchBtn.parent()
    .on('click', ".icon-search", function(e) {
        //search logic
    })
    .on('click', ".icon-cross", function(e) {
        //cross logic
    });