javascript - How to find dynamically created element using jQuery selectors? -

i have form has elements in it. want elements inside form regardless of depth.

this 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 '+id);                 $(this).trigger('change');                 console.log('if-> element name '+$(this).attr('name'));             }             else             {                 console.log('else-> element name '+$(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 have dynamic elements created on select change events during iteration. want these dynamically created elements iterate through form.

i not able access "new row" element gets created dynamically on clicking 'check' button

this complete test code

just added count variable distinguish 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 ' + id);          $(this).trigger('change');          console.log('if-> element name ' + $(this).attr('name'));        } else {          console.log('else-> element name ' + $(this).attr('name'));        }        });    });    //clicked twice show 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 can see 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 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 want element there before execute each , can : 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 ' + id);          console.log('if-> element name ' + $(this).attr('name'));       } else {         console.log('else-> element name ' + $(this).attr('name'));       }      });   });