How to find dynamically created element using jQuery selectors?

Question

I have a form which has certain elements in it. I want to get all the elements inside the form regardless of their depth.

This is my test code

$(document).ready(function(){
    //script.init(markchaining);
    $('#checkbutton').click(function(){
        $('#saveForm :input').each(function(key){
            if($(this).is('select'))
            {
                var id = $(this).attr('id');
                console.log('id is '+id);
                $(this).trigger('change');
                console.log('if-> Element name is '+$(this).attr('name'));
            }
            else
            {
                console.log('else-> Element name is '+$(this).attr('name'));
            }

      });
    });
});

function addRow(ele,name)
{
var id = ele.id;
    $('#'+id+'').closest('tr').after('<tr><td class="label-cell">New Row</td><td><input type="text" name="'+name+'" /></td></tr>');
}

My Problem

I also have dynamic elements which will be created on certain select change events during the iteration. I want to get these dynamically created elements as I iterate through my form.

I am not able to access the "New Row" element which gets created dynamically on clicking the 'check' button

This is my complete test code

What is not working ? Bu the time you are accessing elements in `loop`, they are there in `DOM`, they should be easily accessible... — Rayon, Jun 28 '16 at 12:26
I am not getting the newly created row on clicking the 'check' button. If you see the console all the elements are accessed except the new row — Nishant123, Jun 28 '16 at 12:29
This should give you a push in the right direction: http://stackoverflow.com/questions/6537323/jquery-function-not-binding-to-newly-added-dom-elements — efreeman, Jun 28 '16 at 12:30
Are you sure you are unable to access the newly created elements ? Because the fiddle you mentioned is working just fine and your new elements' name are getting printed. — Himanshu Tyagi, Jun 28 '16 at 12:55
I can see `else-> Element name is myid` getting printed in console `n` number of times where `n` is number of inputs dynamically created. — Himanshu Tyagi, Jun 28 '16 at 12:58

Himanshu Tyagi · Accepted Answer · 2016-06-28T13:11:42.050

Just added a count variable to distinguish the names on console. https://jsfiddle.net/ztpjacyu/

$(document).ready(function() {
  //script.init(markchaining);
  $('#checkbutton').click(function() {
    $('#saveForm :input').each(function(key) {
      if ($(this).is('select')) {
        var id = $(this).attr('id');
        console.log('id is ' + id);
        $(this).trigger('change');
        console.log('if-> Element name is ' + $(this).attr('name'));
      } else {
        console.log('else-> Element name is ' + $(this).attr('name'));
      }

    });
  });
  //Clicked twice to show you the console
  $('#checkbutton').click();
  $('#checkbutton').click();
});
var count = 0;

function addRow(ele, name) {
  var id = ele.id;
  $('#' + id + '').closest('tr').after('<tr><td class="label-cell">New Row</td><td><input type="text" name="' + name + ++count + '" /></td></tr>');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="mainform" id="saveForm" action="#">
  <!--##GENERAL##-->

<input type="button" name="checkbutton" id="checkbutton" value="Check" /> <- Moved here so that you can see the console
  <div id="fromuser">
    <table width="100%" id="userTable">
      <tr id="ReportNameRow">
        <td class="label-cell">Report Name :</td>
        <td>
          <input type="text" name="CustomReportName" id="CustomReportName" />
        </td>
      </tr>
      <tr id="ReportNamrRow">
        <td class="label-cell">* Saved Report Name :</td>
        <td>
          <select name="rname" id="rname" onChange="addRow(this,'MYID');">
            <option value="">---Select---</option>
            <option value="Cash_Position">Cash Position</option>
            <option value="Detail_Report">Detail Report</option>
            <option value="FCCS/FBPS_Detail_Report">FCCS/FBPS Detail Report</option>
            <option value="Reconciliation_Report">Reconciliation Report</option>
            <option value="Statement_Report">Statement Report</option>
            <option value="CustomReport">Enter Custom Report Name</option>
          </select>
        </td>
      </tr>
      <input type="hidden" name="hiddenid" value="I am hidden" id="hiddenid" />
      <tr id="submit">
        <td class="label-cell"></td>
        <td>
          
          <input type="submit" name="submitbutton" id="submitbutton" value="Submit" />
        </td>
      </tr>
    </table>
  </div>
</form>

Update

if you want the element to be there before you execute your each , you can do this : https://jsfiddle.net/jbrt3Led/

 $('#checkbutton').click(function() {
    $("#rname").trigger('change');
    $('#saveForm :input').each(function(key) {
      if ($(this).is('select')) {
        var id = $(this).attr('id');
        console.log('id is ' + id);

        console.log('if-> Element name is ' + $(this).attr('name'));
      } else {
        console.log('else-> Element name is ' + $(this).attr('name'));
      }

    });
  });

You mentioned above that it is getting printed `n` number of times, `n` being the number of inputs dynamically created,but actually it is `n-1`. It is not getting printed on first click — Nishant123, Jun 28 '16 at 13:06
How will it print on first click? You are actually creating it at that time. The `each` selector has already selected all the `inputs` and then for each of those (already selected) it is executing the code in it. The element will be visible to `each`, the next time. — Himanshu Tyagi, Jun 28 '16 at 13:08
Check the updated portion of the answer if you need the element in the each. Its just a suggestion. — Himanshu Tyagi, Jun 28 '16 at 13:12

How to find dynamically created element using jQuery selectors?

1 Answers1