logo标签列表

如何使用jQuery在Bootstrap中将整行设置为链接

jquerytwitter-bootstrap
3
<table class="table table-hover">
    <thead>
        <tr>
            <td>S.no</td>
            <td>Name</td>
            <td>Points</td>
        </tr>
    </thead>
    <tbody>
        <tr class="clickable-row" data-href="next.html">
            <td>1</td>
            <td>random</td>
            <td>91</td>
        </tr>
    </tbody>
</table>

我使用了以下代码来使用jQuery添加多行。
function tablename() {
    $(document).ready(function () {
        var tr = $("<tr></tr>");
        tr.addClass("clickable-row");
        tr.attr('data-href', 'link.html');
        for (i = 0; i < 3; i++) {
            var td = $("<td></td>").text("dilkush");
            tr.append(td);
        }
        $("tbody").append(tr);
    });
}
jQuery(document).ready(function ($) {
    $(".clickable-row").click(function () {
        window.document.location = $(this).data("href");
    });
});

在页面加载完成后会调用函数“tablename()”（<body onload("tablename();")>）... 在表格中所有的字段都已添加，但是当我点击它时，它不能跳转到下一页... 我使用了Bootstrap，请有经验的人找出错误。

4个回答
1

对于动态添加的元素，您需要使用事件委托。

而不是：

$(".clickable-row").click(function () {

使用 .on() ：
$(document).on('click', ".clickable-row", function () {
更好的做法是给表格添加一个id属性，如<table id="my-table">，然后：
$('#my-table').on('click', ".clickable-row", function () {
1
在页面加载时调用函数的正确方法如下：
<body onload="functionname()">

不要将$(document).ready()放在命名的function内。因此，要么使用可以在body load上调用的function，要么使用未包装在function中的$(document).ready，如下所示：
$(document).ready(function () {
        var tr = $("<tr></tr>");
        tr.addClass("clickable-row");
        tr.attr('data-href', 'link.html');
        for (i = 0; i < 3; i++) {
            var td = $("<td></td>").text("dilkush");
            tr.append(td);
        }
        $("tbody").append(tr);
});

现在由于具有类名为clickable-row的element是动态添加的，因此您需要进行事件委托。假设您的table具有id = table1。事件委派如下：
$('#table1').on('click',".clickable-row",function () {
      window.document.location = $(this).data("href");
});
0

当表格行类被点击时，将所点击的行 href 分配给位置 href

$(".clickable-row").click(function(){
    location.href = $(this).data("href");
});
0

你需要在前往的按钮上绑定点击事件。

这是修复方法。

$(".clickable-row").on('click',function () {
        window.document.location = $(this).data("href");
    });
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接