Question

我的应用程序中有一个页面，其中有一个与出现的每个记录相关联的引导程序模式。使用当前设置，我能够触发模式，但是仅触发页面上的第一个模式，而不触发正确关联的模式。我在StackOverflow上尝试了一些答案，这些答案在单个页面上处理了多个模式，但是它们对我不起作用。

这是触发模式的链接：

<td>
    <a href="#" data-toggle="modal" data-target="#comment-modal" data-actual="{{this.documentRequestIdHash}}" id="record-comment-link">
        {{this.document_request_comments.length}} 
        <span class="fas fa-comment text-primary mr-2"></span>
    </a>
</td>

我当时想我可以使用data-actual的动态传递值来标识唯一的模式和相关的内容。

这是模态：

<!-- Comment Modal -->
<div class="modal fade" id="comment-modal" tabindex="-1" role="dialog" aria-labelledby="commentModelLabel" aria-hidden="true">
...
</div>

这是我尝试使用的jQuery，但遇到错误Uncaught TypeError: $(...).modal is not a function：

$('#record-comment-link').on('click', function(){
    var commentModal = $(this).attr('data-actual');
    $(commentModal).modal("show");
  })

Answer 1

行：var commentModal = $(this).attr('data-actual');为commentModel提供{{this.documentRequestIdHash}}的值。假设值为“ modelComment1”。然后，行：$(commentModal).modal("show");查找带有标签“ modelComment1”的任何对象，但找不到该对象。要解决此问题，请将模式HTML更改为

<div class="modal fade" id="{{this.documentRequestIdHash}}" tabindex="-1" role="dialog" aria-labelledby="commentModelLabel" aria-hidden="true">
...
</div>

模态显示代码为

$("#" + commentModal).modal("show");

应该可以解决问题

Bootstrap多种模式向右触发

1 个答案: