对多个按钮使用一个模式引导程序

Question

我从 json 中获取数据并使用 html 将数据添加到我的页面中，如下所示：

$.ajax({
  url: url,
  type: "post",
  dataType: "json",
  data: {
    idbv: 1
  },
  success: function(data) {
    $.each(data, function(index, value) {
      var id = value.id;
      var content = value.content;
      $("#test").append('<button id="btn_'+id +'"></button><div id="modal_'+id+'" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <span>'+content+'</span> </div> </div> </div>');
      //This is the old way i do, it's so bad
      $("#btn_"+id).click(function(){
        $("#modal_"+id).modal("show");
      });
    }
  });
});

如何打开模态引导程序并将数据从 json 发送到具有一个模态的模态引导程序？

Answer 1

Working fiddle.

只需复制您附加到模式内测试元素的数据并显示如下：

$('#myModal .modal-body').html( $('#test').html() );
$('#myModal').modal();

完整代码：

$.ajax({
  url: url,
  type: "post",
  dataType: "json",
  data: {
    idbv: 1
  },
  success: function(data) {
    $.each(data, function(index, value) {
      var id = value.id
      $("#test").append('<button id="btn_'+id +'"></button>');
    });

    $('#myModal .modal-body').html( $('#test').html() );
    $('#myModal').modal();
  }
});

希望得到他的帮助。