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

考虑到您的代码，您有text input，可能还有button或link。

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

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

注册点击事件监听器

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

注册keypress事件监听器

$('#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>');
        }
    }
}

Answer 2

您可以将处理程序放在一个单独的命名函数中，并从任意数量的事件中调用它。

function handler(){
    //all of that stuff
}

$('#add-tag').on("click", handler);
$('#input-tag').on("keypress", function(e){
    if (e.which == 13){
        handler();
    }
});

Answer 3

您可以绑定多个这样的事件

$(".mything").on("click keypress", function(event) {
    //snip
} ));

您需要检查event.which以查看该按键是否为输入按钮，如果是，请继续。

它可能看起来像

$(".mything").on("click keypress", function() {
    if (event.type == "click" || event.type == "keypress" && event.which == 13) {
        //13 is the code for enter
        //do the thing
    }
} ));

jquery触发器函数来自onclick的一个元素或来自另一个元素的keypress（enter）

3 个答案: