Question

绑定由多个输入字段触发的事件的最佳实践是什么？这些字段在jquery中相互依赖？

例如：让我们选择一个搜索引擎，根据下面的字段输入和选择的内容搜索学生。

1. text boxes
2. select lists
3. select boxes
4. option buttons

如果没有触发这些事件的按钮，实现以下目标的最佳方法是什么：

用户输入或选择其中一个输入字段中的值时显示搜索结果，并在用户输入或选择其他字段选项中的值时优化搜索。
仅在每个字段都有有效值后才显示搜索结果。

任何输入都会被认可。

Answer 1

只需为它们提供一个公共类名，然后使用类选择器绑定change事件：

<强> HTML：

<input type="text" class="search-field" />
<input type="text" class="search-field" />
<select class="search-field" ><option>1</option><option>2</option></select>
<input type="radio" class="search-field" />

<强> JS：

$('.search-field').change(function() {
    // validate all search field values
    // display search results based on values
    // if search results already shown, filter based on $(this).val()
});

<小时/> 如果您有许多这些字段，而不是将处理程序绑定到每个字段（如上面的代码所示），那么通过使用委托事件处理程序可以获得更好的性能：

<强> HTML：

<div id='parent'>
    <input type="text" class="search-field" />
    <input type="text" class="search-field" />
    <select class="search-field" ><option>1</option><option>2</option></select>
    <input type="radio" class="search-field" />
</div>

<强> JS：

$('#parent').on('change', '.search-field', function() {
    // validate all search field values
    // display search results based on values
    // if search results already shown, filter based on $(this).val()
});

Answer 2

我把这个jsFiddle http://jsfiddle.net/VJwpv/1/放在一起。

如果您正在尝试使用JavaScript进行验证，那么我建议您查看此jQuery Validation plugin

<强> HTML

<div id="searchForm"> 
    <input id="textBox" class="searchField" type="text" />
    <select id="dropDown" class="searchField">
        <option value="Option1">Option1</option>
        <option value="Option2">Option2</option>
    </select>
    <input id="checkbox1Value" type="checkbox" name="checkbox" value="Checkbox1" />Checkbox1 
    <input id="checkbox2Value" type="checkbox" name="checkbox" value="Checkbox2" />Checkbox2
    <input type="radio" name="radio" value="Radio1" /> Radio1
    <input type="radio" name="radio" value="Radio2" /> Radio2
</div>

<div id="results"></div>

<强>的JavaScript

function validateForm() {
    // if valid
    return true;
    // else return false
}

function performSearch() {
    var textBoxValue = $("#textBox").val();
    var dropDownValue = $("#dropDown").val();
    var checkbox1Value = $("#checkbox1Value").is(":checked");
    var checkbox2Value = $("#checkbox2Value").is(":checked");
    var radioValue = $("input:radio[name=radio]:checked").val();
    // What you'd actually do here is an AJAX call to get the search results
    // and pass all the values defined above in the request
    $("#results").html("Textbox: " + textBoxValue + ". Dropdown: " + dropDownValue + ". Checkbox1: " + checkbox1Value + ". Checkbox2: " + checkbox2Value + ". Radio: " + radioValue);
}

function onChange() {
    if (validateForm()) {
        performSearch();
    }
}

$(document).ready(function() {
    $("#searchForm input, #searchForm select").change(function() {
        onChange();
    });
});

由多个输入字段触发的绑定事件

2 个答案: