Question

我使用的是动态添加的文本框（类名为myclass），需要验证所有文本框。我的代码在这里。此编码仅适用于第一个文本框。如果我添加新文本框，代码不起作用。我不知道如何在每个（function（））

中编写事件绑定

$('.myclass').each(function() {         
    $(this).rules('add', {
        required: true,             
        messages: {
            required: "Required input"                  
        }
    }); 
});

HTML CODE

<div id="TextBoxesGroup">
<div id="Div1">
<input type='text' value ='' class='myclass' />
</div>
</div>
<input type="button" name="add" id="addButton" value="Add">
$(document).ready(function(){
var counter=2;
$("#addButton").click(function() {
     var newTextBoxDiv = $(document.createElement('div')).attr("id", 'Div' + counter);
var texthtml = "";
texthtml += "<input type='text name='fieldname[]' class='myclass' value='' />";
newTextBoxDiv.after().html(texthtml);
newTextBoxDiv.appendTo("TextBoxesGroup");
});

Answer 1

每个函数只能应用于DOM中已存在的元素。稍后添加的元素不会受到影响。创建后，您需要将rules()应用于它们。像这样：

$("#addButton").click(function() {
     var newTextBoxDiv = $(document.createElement('div')).attr("id", 'Div' + counter);
     ...
     $( newTextBoxDiv ).rules( ... );
});

Ps：为了获得更易读的代码，请尝试将您的功能封装到函数中。喜欢

function addRulesToElement( element ) {
    $( element ).rules( ... );
}

然后，您可以通过each()循环和#addButton点击处理程序without repeating yourself调用此函数。

每个jquery函数中的事件绑定

1 个答案: