Question

我试图在第二次ajax调用中使用jquery选择器更新foreach中的段落标记。我将id标记设置为id="spots_,+item.id＆＃34;但不知道如何访问foreach循环外的动态id标记。我一直在＆＃34; id未定义＆＃34;错误。想到也许一个全局变量可行，但没有成功。

//ajax form the get available times to play
$('#form').submit(function(){
$.ajax({
  url: $('#form').attr('action'),
  type: 'POST',
  data : $('#form').serialize(),
     success: function(response){
      $.each(JSON.parse(response), function(i, item) {
          var jdate = $('#date').val();

        $('<tr>').html("<td>" + item.time + "</td><td>" + '<form class="insideForm" action="/reservations/getSpots" accept-charset="utf-8"  method="">'  + '<input type="text" name="jtime" value="' + item.time + '"' + "/>"  + '<input type="text" name="jdate" value="' + jdate + '"' + ">" + '<input type="submit" class="btn btn-primary" value="Spots">' +  '</form>' + "</td><td>" + "Spots:" + '<p class="spots" id="spots_' + id + '"'+ ">" + '<div id="spots"></div>' + '</p>'  +  "</td>").appendTo('#availableTimes');
        });//end loop                   

    //ajax form the get available spots/seats 
$('.insideForm').submit(function(){
var form = $(this).closest('form');

$.ajax({
  url: $(this).attr('action'),
  type: 'POST',
  data : $(this).serialize(),
          success: function(response){        
        $('#spots_'+id).html(response);         
      }//end success      
    });
   return false;
});                    
  }//end success
});
return false;
});//end ajax time form

Answer 1

在你的.insideForm对象中，你只有一个.spots被分类的段落。

尝试在表单中使用jQuery选择器：

$('.insideForm').submit(function () {
    var form = $(this).closest('form');

    $.ajax({
        url: form.attr('action'),
        type: 'POST',
        data: form.serialize(),

        success: function (response) {
            $('.spots', form).html(response);
        }//end success

    });
    return false;
});

Answer 2

在$.ajax来电更改url: $(this).attr('action')至url: form.attr('action')中。在回调中，$(this)引用了ajax调用的jqXHR对象，而不是事件处理程序绑定的元素。

修改

由于上述原因，我也将$(this).serialize()更改为form.serialize()。

//ajax form the get available spots/seats $('.insideForm').submit(function() { var form = $(this).closest('form'); $.ajax({ url: form.attr('action'), type: 'POST', data: form.serialize(), success: function(response) { $('#spots_' + id).html(response); } //end success }); return false; });

如何使用jquery访问动态id标记

2 个答案: