将数据传递给 Bootstrap 3 模态答案

【问题标题】：Passing data to Bootstrap 3 Modal将数据传递给 Bootstrap 3 模态
【发布时间】：2013-12-21 20:13:56
【问题描述】：

我有一个包含一堆数据的表，我在每一行的末尾放置了一个按钮，我想用它来触发模态并将该行的唯一 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>

【问题讨论】：

你似乎做得对。要绝对确定，请尝试 console.log-ing myBookId 和 $(".modal-body #bookId")。它们是否包含应有的内容？
我得到一个未捕获的 ReferenceError: $ is not defined 这是指 $(document).on("click", ".open-AddBookDialog", function () {跨度>
如果 $ 没有定义，那么你还没有将 jQuery 加载到页面上。你需要 jQuery 和 bootstrap 的 JS。
我已经加载了 jQuery，我什至将脚本移到了标题中，看看是否能解决它，但它没有改变任何东西 :(

标签： javascript twitter-bootstrap-3

【解决方案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/

【讨论】：

谢谢你，你的代码帮我查明了错误，很遗憾是用户错误。
没有 data-toggle="modal" 它不起作用，数据无法传递给 modal。
@PareshGami 这是一个问题，还是你说这行不通？如果是后者，包含的 jsFiddle 往往会不同意。