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

Hoept他的帮助。

使用一个模态引导程序用于多个按钮

1 个答案: