Question

我有一个包含大量数据的表，并且我在每行的末尾放置了一个按钮，我想用它来触发模态并将该行的唯一ID传递给模态。

我找到了这个答案：Passing data to a bootstrap modal

但它似乎不适用于Bootstrap 3，我无法找到任何想法的任何数据？

我使用的是相同的代码：

部首：

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href = "bootstrap/css/bootstrap.min.css" rel = "stylesheet">
<link href = "bootstrap/css/styles.css" rel = "stylesheet">
<script type="text/javascript">
$(document).on("click", ".open-AddBookDialog", function () {
var myBookId = $(this).data('id');
$(".modal-body #bookId").val(myBookId);
});
</script>
</head>

体：

<a data-toggle="modal" data-id="ISBN" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>

模态：

<div class="modal" id="addBookDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>

</div>
<div class="modal-body">
<p>some content</p>
<input type="text" name="bookId" id="bookId" value="" />
</div>
</div>

结果页面将打开模态，但文本字段为空。

我忘了提及，我确实加载了jquery和bootstrap：

<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src = "bootstrap/js/bootstrap.js"></script>

Answer 1

尝试手动触发模态，而不是使用数据API。

像这样更新超链接：

<a data-id="ISBN" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>

然后调整你的jQuery代码：

$(document).on("click", ".open-AddBookDialog", function (e) {

    e.preventDefault();

    var _self = $(this);

    var myBookId = _self.data('id');
    $("#bookId").val(myBookId);

    $(_self.attr('href')).modal('show');
});

似乎为我工作; jsFiddle @ http://jsfiddle.net/4XJ54/

将数据传递给Bootstrap 3 Modal

1 个答案: