jquery遍歷元素並將事件綁定到每個元素上

Question

我需要將一個按鍵事件綁定到一個動態構建的元素形式，見下文

<div class="Customer">
<select name="dropdown1" id="dropdown1">
</select>
<input type="textbox" name="firstname1" id="firstname1">
<input type="textbox" name="lastname1" id="lastname1">
</div>

<div class="Customer">
<select name="dropdown2" id="dropdown2">
</select>
<input type="textbox" name="firstname2" id="firstname2">
<input type="textbox" name="lastname2" id="lastname2">
</div>

... and repeat..

我需要檢查每當上面的任何元素被更改時，沒有其他元素是空的。

該表單中還包含其他幾個元素，盡管我只關心代碼段中突出顯示的這些元素。

非常感謝，

我試過以下代碼

$('.Customer').each(function (index) {

    alert("test");  // alerts the correct number of customer rows

    $("input:textbox").click(function() {
        alert("");
    })

});

解決方案應該與jQuery 1.3.2一起使用

Answer 1

看到它在這里工作

<input type="checkbox" id="test" name="test" disabled="disabled">

<div class="Customer">
<select name="dropdown1" id="dropdown1">
    <option value="1.1">1.1</option>
    <option value="1.2">1.2</option>
</select>
<input type="text" name="firstname1" id="firstname1">
<input type="text" name="lastname1" id="lastname1">
</div>

<div class="Customer">
<select name="dropdown2" id="dropdown2">
    <option value="2.1">2.1</option>
    <option value="2.2">2.2</option>
</select>
<input type="text" name="firstname2" id="firstname2">
<input type="text" name="lastname2" id="lastname2">
</div>​

$('.Customer input, .Customer select').bind("change keyup", function(){
     var me = $(this);
     var clicked = me.attr("name");
     var empty = false;
     $('.Customer input,select').each(function(){
         var elem = $(this);
             if (elem.val() == "") {
                 empty = true;
             }
     });
     if (empty) {
        $('#test').attr('disabled','disabled')
     } else {
        $('#test').removeAttr('disabled')
     }
});​

PS：輸入中沒有類型的文本框。 這是文字。 為了在更改內容時觸發回調，請使用“更改”而不是“單擊”事件。 如果您希望它同時適用於輸入和下拉菜單，則需要“輸入，選擇”

Answer 2

如果要在每個文本輸入上附加事件處理程序，您應該這樣做

HTML（類型是“文本”而不​​是“文本框”）

<div class="Customer">
<select name="dropdown1" id="dropdown1">
</select>
<input type="text" name="firstname1" id="firstname1">
<input type="text" name="lastname1" id="lastname1">
</div>

<div class="Customer">
<select name="dropdown2" id="dropdown2">
</select>
<input type="text" name="firstname2" id="firstname2">
<input type="text" name="lastname2" id="lastname2">
</div>

JS

$('.Customer').each(function (index) {
        $("input:text", this).click(function() {
        alert("");
    })

});​

http://jsfiddle.net/pSFj3/

編輯 - 我想指出你使用了錯誤的語法，但是很多人指出有更好的方法來處理事件。 例如，您可以使用事件委派

$('.Customer').on( 'click', 'input:text', function() {
   alert('clicked on input');
});

Answer 3

如果要將click事件附加到“Customer”類的元素中的每個文本框，則不應該這樣做：

$(".Customer input[type=text]").click(function() { });

Answer 4

如果在客戶端上動態構建表單，則需要使用$.on()函數。

$(document).on('keypress', '.Customer input[type="text"]', function() { ... });