javascript - Jasny Bootstrap rowlink 模态调用

Question

当我试图找到类似 .row-link 的东西时，我才发现 Bootstrap 有一个扩展。所以当我在我的 table 上实现它时，我似乎无法在我点击每一行时调用模式。 boostrap 中的模态将不会被调用。我真的无法追踪为什么当我调试(使用 Firebug )页面时，td 标签 我把我的a 标签，我的a 标签 链接看不到。显示的只是 的值。例如 <a> some link </a>

some link 是我在 firebug 上看到的唯一东西，通常当我调试时，我会看到所有的 html 标签，就像这样 <a href="some link" data-toggle="modal" data-target="some taget"> click me </a>但我真的不知道为什么我不能使用行链接调用模式

同样，我的目标是当我点击 1 行时出现一个模式框

这是我的代码片段

<table>
   <thead>
        // some headers
   </thead>
   <tbody data-provides="rowlink">
      <tr>
        <td><a href="#myModal" data-toggle="modal" data-target="modal">Click me</a> </td>
        <td>/*some data*/</td>
        <td>/*some data*/</td>
      </tr>
   </tbody>
</table>

<div id="myModal" /*some legit modal attr please see bootstrap site i just copied them*/>
    <div>
        MODAL HEADER
    </div>

    <div>
        MODAL BODY
    <div>

    <div>
        MODAL FOOTER
    <div>
</div>

当我尝试这个时，请注意这个链接在 table html 标签

之外

<a href="#myModal" data-toggle="modal" data-targe="modal">Click me</a>

任何人都知道如何在行链接内实现模态视图，请分享

Answer 1

如果你检查这个link ，下面的代码从链接中获取 href，并在单击行时将 window.location 更改为 href，因此它需要一个 URL。

var href = link.attr('href')

$(this).find('td').not('.nolink').click(function() {
   window.location = href;
}) 

还有 <a>他们的代码中也提到了被剥离的标签。

link.replaceWith(link.html())

解决此问题的解决方案是手动编写一个脚本，在该脚本中，您将目标行定位为具有模态的行，并将所需的属性添加到该行。参见 Fiddle .在这里我给了一个类 .rowlink-modal到 tr 哪个可以点击并在脚本中定位该类并添加数据属性。

$('.rowlink-modal').each(function(){
 $(this)
   .attr('data-toggle','modal')
   .attr('data-target','#myModal');
});

如果单击“操作”链接，将打开 modal2，当您单击整行时，将打开第一个模式。