여러 입력 필드에 의해 트리거되는 바인딩 이벤트

Question

jquery에서 서로 종속적 인 여러 입력 필드에 의해 트리거 된 이벤트를 바인딩하는 모범 사례는 무엇입니까?

예 : 아래 입력란에 입력하고 선택한 내용을 기반으로 학생을 검색하는 검색 엔진을 사용할 수 있습니다. 사용자가 입력 필드 중 하나에 값을 입력하거나 선택하는 즉시

1. 표시 검색 결과 : 이러한 이벤트를 트리거 버튼없이

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

   다음을 달성하기위한 가장 좋은 방법은 무엇인가 사용자가 다른 필드 옵션에서 값을 입력하거나 선택함에 따라 검색을 구체화합니다.

2. 각 필드의 값이 유효한 경우에만 검색 결과를 표시합니다.

모든 입력이 appretiated 될 것입니다.

Answer 1

저는 이것을 jsFiddle http://jsfiddle.net/VJwpv/1/과 함께 사용했습니다.

것은 당신이 자바 스크립트 유효성 검사를하고보고있는하다면 나는 당신이 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> 

자바 스크립트

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(); 
    }); 
});​ 

Answer 2

그냥 그들에게 모든 일반적인 클래스 이름을주고, 클래스 선택기를 사용하여 변경 이벤트를 바인딩 :

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