Nishant123 Nishant123 - 5 months ago 23
jQuery Question

How to find dynamically created element using jQuery selectors?

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

Answer

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>

Comments