javascript - jquery 通过一个元素的单击或另一个元素的按键(输入)触发函数

Question

如何在单击一个元素(按钮)或从另一个元素(输入)按下(输入)时最好地触发此功能？

$('#add-tag').on("click", function() {
input = $('#input-tag').val();
if((selected === true) && (input.length > 0)) {
    $('#tag-results').append('<div class="tag"><input id="'+id+'" type="hidden" name="'+name+'" value="'+input+'" />'+label+':'+input+'<button type="button" class="close" data-dismiss="alert"><i class="fa fa-remove"></i></button></div>');
    $('#search-type').html('Search by <span class="caret"></span>');
    $('#input-tag').val("").attr('placeholder', 'Select a search type...');
    $('#alert').empty();
    selected = false;
    input = null;
} else {
    if(selected === true) {
        $('#alert').append('<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button><strong>Warning!</strong><small><br />Please enter your criteria.</small></div>');
    } else {
        $('#alert').append('<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button><strong>Warning!</strong><small><br />Please select a search type.</small></div>');
    }
}
});

html:

<div class="input-append input-prepend">
    <div class="btn-group">
        <button id="search-type" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
            Search by
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a data-name="cat" data-label="type">Property Type</a></li>
            <li><a data-name="lowprice" data-label="low price">Low Price</a></li>
            <li><a data-name="highprice" data-label="high price">High Price</a></li>
            <li><a data-name="brms" data-label="bedrooms">Bedrooms</a></li>
            <li><a data-name="bthrms" data-label="bathrooms">Bathrooms</a></li>
            <li><a data-name="city" data-label="city">City</a></li>
            <li><a data-name="zip" data-label="zip">Zip Code</a></li>
        </ul>
    </div>
    <input id="input-tag" class="span4" id="appendedPrependedInput" type="text" placeholder="Select a search type..." />
    <button id="add-tag" class="btn btn-primary"><i class="fa fa-plus"></i></button>
</div>
<form id="search" class="form-inline" method="get" action="/property/search">
    <div id="alert"></div>
    <div id="tag-results"></div>
    <input class="btn btn-primary" name="Search" type="submit" value="Search Properties" title="Search Properties" />
</form>

基本上，我需要这样的行为，以便如果输入字段已按下输入或单击按钮，则会触发该功能。我为之前的含糊道歉，所以我非常乐意添加更多细节。

Answer 1

考虑到您的代码，您有一个文本输入，可能还有一个按钮或链接。

然后，您需要注册2个事件监听器。一个用于按钮元素上的 click 事件，另一个用于文本输入元素上的 keypress 事件。

然后，您的代码应如下所示:

注册点击事件监听

$('#add-tag').on("click", function() {
    processInput($('#input-tag').val());
});

注册按键事件监听器

$('#input-tag').on("keypress", function(e) {

    var code = e.keyCode || e.which;

    if(code == 13) { // 13 = enter key-code        
        processInput($(this).val()); // 'this' refers to #input-tag
    }
});

你的处理程序将是这样的:

var processInput = function(input){

    if((selected === true) && (input.length > 0)) {
        $('#tag-results').append('<div class="tag"><input id="'+id+'" type="hidden" name="'+name+'" value="'+input+'" />'+label+':'+input+'<button type="button" class="close" data-dismiss="alert"><i class="fa fa-remove"></i></button></div>');
        $('#search-type').html('Search by <span class="caret"></span>');
        $('#input-tag').val("").attr('placeholder', 'Select a search type...');
        $('#alert').empty();
        selected = false;
        input = null;
    } else {
        if(selected === true) {
            $('#alert').append('<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button><strong>Warning!</strong><small><br />Please enter your criteria.</small></div>');
        } else {
            $('#alert').append('<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button><strong>Warning!</strong><small><br />Please select a search type.</small></div>');
        }
    }
}