javascript - 使用ajax获取div的内容

Question

我有几个像这样的 div，我用 ajax 创建它们

.done(function( response ) {
    $("#stores").html('');
    var iterator = response.retailer;
    for (var i=0;i<iterator.length;i++){
    $("#stores").html($("#stores").html()+
    "<div id="+response.retailer[i].id+" class='panel panel-default '>"+
    "<div class='panel-body'>"+
    "<p> Name: "+response.retailer[i].name+"<p>"+
    "<p> Address: "+response.retailer[i].address+"<p>"+                
    " <button id='AddAndSave' class='btn btn-success col-md-offset-10'><span class='glyphicon glyphicon-plus'></span></button>"+
    "</div>"+
    "</div>");
    }
})

如果你看到，在 div 中我有一个按钮，当我单击该按钮时，我想获取该 div 的所有内容并将其保存在变量中，我该如何做到这一点？任何引用？

Answer 1

嗯，首先，不要在该按钮上使用 ID，您肯定会有多个。所以，改用类:

.done(function( response ) {
    $("#stores").html('');
    var iterator = response.retailer;
    for (var i=0;i<iterator.length;i++){
    $("#stores").append("<div id="+response.retailer[i].id+" class='panel panel-default '>"+
    "<div class='panel-body'>"+
    "<p> Name: "+response.retailer[i].name+"<p>"+
    "<p> Address: "+response.retailer[i].address+"<p>"+                
    " <button class='AddAndSave btn btn-success col-md-offset-10'><span class='glyphicon glyphicon-plus'></span></button>"+
    "</div>"+
    "</div>");
    }
})

然后，现在您不能将事件附加到该元素，因为它是在 $(document).ready(); 之后创建的，您需要将该事件委托(delegate)给文档本身(或任何“静态” parent ):

$(document).on('click', '.AddAndSave', function(){
  // Do some stuff on click on .AddAndSave
});

另外，请注意我用 append() 方法替换了您的 html() 方法:它肯定会更有效率。