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

看到它正常工作here

<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：输入中没有类型的textbos。这是文字。为了在更改内容时触发回调，请使用“更改”而不是“单击”事件。如果您希望它同时适用于输入和下拉菜单，则需要“输入，选择”

Answer 2

如果你想在每个文本输入上附加事件处理程序，你应该

HTML（类型为“text”而不是“textbox”）

<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-event附加到“Customer”类元素中的每个文本框中，那么这不应该起作用：

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

Answer 4

如果在客户端上动态构建表单，则需要使用$.on()函数。

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

jquery遍历元素并将事件绑定到每个元素上

4 个答案: