Question

我有一组输入（文本框），它们是通过AJAX（$.post()）动态添加的。这些输入框也必须经过验证。验证有效，但我似乎无法将任何类添加到输入框

  $("input[id^=code]").each(function() {
      if (!$.isNumeric($(this).val()) || $(this).val().length !== 6) {
          $(this).addClass("invalid");
      }
  })

输入框以ID code开头，并显示为：code1, code2, code3

html：

<div id="shoe_codes_maininput" style="display: table-cell;">
<div id="shoe_codes_row_1"> 
    <label class="shoe_code_label required">Shoe Code 1:<span class="star"> *</span></label> 
    <div class="shoe_code_input"><input placeholder="Enter the shoe code" id="code1" name="shoe[code_1]" class="required" maxlength="6"> </div> 
</div> 

<div id="shoe_codes_row_2"> 
    <label class="shoe_code_label required">Shoe Code 2:<span class="star"> *</span></label> 
    <div class="shoe_code_input"><input placeholder="Enter the shoe code" id="code2" name="shoe[code_2]" class="required" maxlength="6"> </div> 
</div> 
</div>

Joomla提交功能：

    $(document).ready(function() {
        Joomla.submitbutton = function(task)
        {
            if (task == 'order.cancel') {
                Joomla.submitform(task, document.getElementById('order-form'));
            }
            else {
                var order = true;
                $("input[id^=code]").each(function() {
                    if (!$.isNumeric($(this).val()) || $(this).val().length !== 6) {
                        $(this).addClass("invalid");
                        order = false;
                    }
                })

                if (task != 'order.cancel' && document.formvalidator.isValid(document.id('order-form')) && order) {
                    Joomla.submitform(task, document.getElementById('order-form'));
                }
                else {
                    alert('<?php echo $this->escape(JText::_('JGLOBAL_VALIDATION_FORM_FAILED')); ?>');
                }
            }
        }
    });

Answer 1

在页面中附加DOM后，您需要在成功函数中编写代码。

success: function(){
//append input elements dynamically to page
 $("input[id^=code]").each(function() {
  if (!$.isNumeric($(this).val()) || $(this).val().length !== 6) {
      $(this).addClass("invalid");
  }
 });
}

Answer 2

您需要使用引号将匹配文本包装在选择器中。

$( "input[id^='code']" )
//            ^    ^

查看文档以获取更多示例 - http://api.jquery.com/attribute-starts-with-selector/

jQuery（“[attribute ^ ='value']”）

使用jQuery将类添加到动态生成的DOM元素

2 个答案: