Question

我正在使用带有动态创建输入的小附件表单。

这些新输入以这种方式创建：

function addAttachmentRow() {
    var htmlRow = '<tr><td><input type="text" name="file_name[]"></td></tr>';
    $("#attachment_list").append(htmlRow);
}

我正在尝试准备验证功能，但是这段代码：

$( document ).ready(function() {
    $('input[name^="file_name"]').each(function() {
        $(this).keydown(function(){ 
            if ($(this).val().length < 2) {
                $(this).css("background-color", "#FFCCCC");
                $(this).css("border", "1px solid #665252");
                $(this).css("color", "#B20000");
            } else {
                $(this).css("background-color", "#F5FFEB");
                $(this).css("border", "1px solid #5CE65C");
                $(this).css("color", "#145214");
            }
        }); 
    });
});

但它仅适用于静态创建的第一个元素。它不会影响在单击“addAttachmentRow”并添加新输入时创建的元素。

将其更改为

$('input[name^="file_name[]"]').each(function() {

也没有帮助，我只需要在输入名称中加上[]。

有什么想法吗？

提前致谢。

Answer 1

是。它发生了。它没有用该代码选择元素。您将需要使用$（document）.on方法而不是此。

<强>解决方案：

使用此代码

$(document).on('event', 'selector', function() {
    // code
});

e.g。

$(document).on('each', 'input[name^="file_name[]"]', function() {
    alert('Event fired!');
});

Answer 2

您需要将事件与动态元素的文档绑定：

$(function(){
  $(document).on('keydown', 'input[name^="file_name"]', function(e) {
    /* to do here */
  });
});

试试这个演示：

＆＃13;

$(function() {
  $(document).on('keydown', 'input[name^="file_name"]', function(e) {
    var err = 2 > $.trim(this.value).length;
    $(this).toggleClass('rest', !err).toggleClass('err', err);
  });
});

function addAttachmentRow() {
  var htmlRow = '<tr><td><input type="text" name="file_name[]"></td></tr>';
  $("#attachment_list").append(htmlRow);
}

＆＃13;

.rest {
  background-color: #F5FFEB;
  border: 1px solid #5CE65C;
  color: #145214;
}
.err {
  background-color: #FFCCCC;
  border: 1px solid #665252;
  color: #B20000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type='button' value='Add' onclick='addAttachmentRow()' />
<table id='attachment_list'>
</table>

＆＃13;

验证新创建的输入

2 个答案: