Add class to dynamically generated DOM element with jQuery

Question

I have a set of inputs (text boxes) which are added dynamically with the means of AJAX ($.post()). These input boxes have to be validated too. The validation works, but I can't seem to add any classes to the inputbox

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

The input boxes start with the id code and go like: code1, code2, code3

The 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>

The Joomla submit function:

    $(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')); ?>');
                }
            }
        }
    });

what makes you say the class is not added? maybe it's a problem of selection, can you post the code where that class is needed? — Carlo Moretti
– Carlo Moretti, Commented Aug 1, 2014 at 9:29
Like Milind Anantwar said, you need to write the code in the success function. Otherwise it will be executed before the elements have been added in the DOM — Razvan B.
– Razvan B., Commented Aug 1, 2014 at 9:34
If you remove the conditional statement and the code starts to work you can rule out any issues with your selectors. Then you can focus on the conditional. — Lix
– Lix, Commented Aug 1, 2014 at 9:34
Please show the rest of your code as the problem is likely to be with where it is placed. — iCollect.it Ltd
– iCollect.it Ltd, Commented Aug 1, 2014 at 9:41

Milind Anantwar · Accepted Answer · 2014-08-01 09:29:46Z

2

You need to write the code in success function after appending the DOM in page.

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

answered Aug 1, 2014 at 9:29

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ortixx Over a year ago

I want the class to be added when the form is submitted (joomla admin form). The form is submitted by javascript and not a regular submit button. Would that work with what you described?

Milind Anantwar Over a year ago

@Ortixx: in that case you need to write the code on submit click.

Lix · Accepted Answer · 2014-08-01 09:29:32Z

0

You need to wrap the matching text in your selector with quotes.

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

Checkout the documentation for more examples - http://api.jquery.com/attribute-starts-with-selector/

jQuery( "[attribute^='value']" )

answered Aug 1, 2014 at 9:29

Lix

48.2k12 gold badges107 silver badges134 bronze badges

11 Comments

iCollect.it Ltd Over a year ago

You only need to wrap it in quotes if it contains special characters (like "-" or " ")

Rajaprabhu Aravindasamy Over a year ago

There is no need to wrap it inside quotes since it dont have any metacharacters in it and it is a single word..

iCollect.it Ltd Over a year ago

The documentation is incomplete... In all attribute selectors the inner quotes are optional and only required if the string contains special characters (that would confuse the parser). Try it in a JSFiddle and see. In any case this does not answer the question (not my downvote BTW).

Rajaprabhu Aravindasamy Over a year ago

@Lix

Attribute values in selector expressions must follow the rules for W3C CSS selectors; in general, that means anything other than a valid identifier should be surrounded by quotation marks.

Found it

iCollect.it Ltd Over a year ago

@Rajaprabhu Aravindasamy: Thank you :) OK, the documentation is not incomplete. You just need to know where to look :)

|

Collectives™ on Stack Overflow

Add class to dynamically generated DOM element with jQuery

2 Answers 2

2 Comments

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related