Question

我有一个包含某些元素的表单。我希望获得形式内的所有元素，无论其深度如何。

这是我的测试代码

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

我的问题

我还有动态元素，这些元素将在迭代期间的某些select更改事件上创建。我想在迭代我的表单时获取这些动态创建的元素。

我无法访问单击“检查”按钮动态创建的“新行”元素

This 是我的完整测试代码

Answer 1

刚刚添加了一个count变量来区分控制台上的名称。 https://jsfiddle.net/ztpjacyu/

＆＃13;

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

＆＃13;

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

＆＃13;

<小时/> 更新

如果您希望在执行each之前元素在那里，您可以执行此操作：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'));
      }

    });
  });

如何使用jQuery选择器查找动态创建的元素？

1 个答案: