Question

我有一个运行时生成的div（由js），结构如下：

$('.display_section').html(
'<div class="edit_container">' +
     '<h1>Edit member</h1>' +
  '<div class="edit_split">' +
    '<div class="edit_label">First Name:</div>' +
    '<div id="edit_first_name" class="edit_attr"><input type="text" id="edit_first_name" value="' + edit_member_first_name + '"/></div>' +
  '</div>' +
  '<div class="edit_split">' +
    '<div class="edit_label">Last Name:</div>' +
    '<div id="edit_last_name" class="edit_attr"><input type="text" id="edit_last_name" value="' + edit_member_last_name + '"/></div>' +
  '</div>'(...)

在生成之后，我使用以下代码进行验证：

function checkFieldsEdit() 
{   
     if ($('#edit_first_name').val().trim().length === 0)     $('#edit_first_name').addClass('required'); 
     if ($('#edit_last_name').val().trim().length === 0)      $('#edit_last_name').addClass('required');

为什么这个验证没有做任何事情。即使文本框为空，其类也不会更改。由于脚本什么都不做，因此以下函数返回true并不奇怪：

if (!$('.display_section').children().hasClass('required')) {
        return true;
} else {
        return false;
}

有趣的是，我使用类似的功能（名为checkFields，它检查新成员部分的文本输入）在不同的地方但是同一页面。我试图将内容修改为

<input type="text" id="edit_first_name" value="" class="required">(...)

使用chrome运行时元素编辑器（或其名称）查看发生的情况。如果我在控制台中运行以下jQuery代码

!$('.display_section').children().hasClass('required')

结果对我来说是个大惊喜：是的。由于我将其类修改为＆＃34; required＆＃34;，它应该返回false。即使我用过

!$('.edit_container').children().hasClass('required')

结果是真的。当我在控制台上运行$('.required')时，它列出了一个元素，之前我修改了一个元素。但仍然如此。有谁有想法吗？提前谢谢。

修改

重复ID问题已经解决，但主要问题仍然存在：/当我将文本输入的类运行时修改为＆＃34; required＆＃34;时，控制台会给出相同的结果：{{ 1}}

Answer 1

尝试此操作

 if ($('#edit_first_name').val() == '')     $('#edit_first_name').addClass('required'); 
 if ($('#edit_last_name').val() == '')      $('#edit_last_name').addClass('required');

jQuery选择器工作但没有适当的效果

修改

1 个答案: