Question

我正在设置一个ajaxy表单，其中管理员应该能够单击添加按钮（+）以将新条目添加到mysql表中并使该输入可编辑。添加按钮用于添加新行，但新行是“死”。将数据添加到输入文件不会调用ajax php文件来保存包含删除（ - ）行的函数的数据。

表单中的HTML和动态添加的div：

<div class="form-group" >
  <label class="col-xs-2 control-label">Friend's name</label>
  <div class="col-xs-2"><input type="text" class="form-control saveFname" name="fname" id="34"  gid="99" value="" placeholder="First name" /></div>
  <div class="col-xs-2"><input type="text" class="form-control saveLname" name="lname" id="34" gid="99"  value="" placeholder="Last name" /></div>
  <div class="col-xs-1"><button type="button" class="btn btn-default removeButton" id="34" gid="99" ><i class="fa fa-minus"></i></button></div>
</div>

添加字段组的javascript：

// ADD GROUP BUTTON
.on('click', '.addButton', function() {
  var ID=$(this).attr('id');
  var GID=$(this).attr('gid');
  var LAST=$(this).attr('last');
  $("#showGroup").html( "" );
  var dataString = 'name=add' +'&id='+ID +'&gid='+GID +'&last='+LAST;
  $.ajax({
    type: "POST",
    url: "addGroup2.php",
    data: dataString,
    cache: false,
    success: function(html)
    {
      $("#showGroup").html( html );
    }
  })
})
// END ADD GROUP BUTTON

javascript保存字段组数据：

// SAVE FNAME
$('.saveFname').keyup(function()
{
  var check=$(this).val();
  var avail=remove_whitespaces(check);
  var ID=$(this).attr('id');
  var GID=$(this).attr('gid');
  $("#Results").html( "" );
  if(avail!=''){
    $('.check_saveFname').show();
    var String = 'fname='+ avail;
    var dataString = 'fname='+ avail +'&id='+ID;
    $.ajax({
      type: "POST",
      url: "saveGroup2.php",
      data: dataString,
      cache: false,
      success: function(html)
      {
        $("#Results").html( html );
      }
    });
  }else{
    $('.check_saveFname').html('');
  }
});
// END SAVE FNAME

如何让动态添加的输入响应请求？

Answer 1

请更改

行

$('.saveFname').keyup(function()
...

到

$('.saveFname').live('keyup',function()
...

或

$('.saveFname').bind('keyup',function()
...

或

$(document).on('keyup','.saveFname',function()
...

希望这会帮助你。如果您仍然遇到任何问题，请与我联系。

Answer 2

您正在使用.addButton的事件委派，您应该对.saveFname输入字段执行相同操作：

$(document).on('keyup','.saveFname', function(){
    // ...
});

使用ajax创建的字段保存表中的更改

2 个答案: