Question

我有一个表来自数据库的结果。因为结果是'矩阵'，标记会给出

<table>
<thead>
</thead>
    <tbody>
        <td>some datas inside TDs</td>
        <td>Last TD<button class = 'btn-action-edit'></button></td>
    </tbody>
    <tbody>
        <td>some datas inside TDs</td>
        <td>Last TD<button class = 'btn-action-edit'></button></td>
    </tbody>
    <tbody>
        <td>some datas inside TDs</td>
        <td>Last TD<button class = 'btn-action-edit'></button></td>
    </tbody>
<tfooter>
</tfooter>
</table>

对于表格内的每一行，我都有允许某些操作的按钮（即“编辑”/“发布”/等）。单击按钮时，我希望它执行某些操作。为此，我做了以下事情：

$('tbody:nth-child(2) .btn-action-edit').on('click', function() {
    $('tbody:nth-child(2) .detail-edit').toggleClass('open');
});
$('tbody:nth-child(2) .close-edit').on('click', function() {
    $('tbody:nth-child(2) .detail-edit').toggleClass('open');
});

$('tbody:nth-child(3) .btn-action-edit').on('click', function() {
    $('tbody:nth-child(3) .detail-edit').toggleClass('open');
});
$('tbody:nth-child(3) .close-edit').on('click', function() {
    $('tbody:nth-child(3) .detail-edit').toggleClass('open');
});

但假设我在我的数据库或1000+中获得了50多个条目，那么做这项工作将成为一场噩梦

我尝试了一些：

$('table > tbody td:last-child').each(function (index) {
    $(this).find('.btn-action-edit').on('click', function(e) {
            e.preventDefault();
            $('.detail-edit').toggleClass('open');
    });
});

但它不起作用！

关于这个的任何想法;我错过了一些关于循环和/或DOM的东西!!

由于

Answer 1

这样的事情应该有效。

$(".btn-action-edit").on("click", function()  {
    $(this).closest("tbody").find(".detail-edit").toggleClass("open");
});

更新

当您通过Ajax加载内容时，可以设置如下的常规事件监听器：

$(document).on("click", ".btn-action-edit", function() {
    $(this).closest("tbody").find(".detail-edit").toggleClass("open");
});

然后，这将检查该项目在加载时是否在页面上，或者是否稍后使用Ajax将其拉入。

Answer 2

如果您的所有结果都是由服务器呈现的，并且您只是添加它，那么为什么不只是将eventListener添加到类中并相对于事件目标使用它们？

$('button.btn-action-edit').on('click', function() {
    $(this).closest('tbody').find('.detail-edit').toggleClass('open');
});

$('button.close-edit').on('click', function() {
    $(this).closest('tbody').find('.detail-edit').toggleClass('open');
});

如果要使用ajax加载元素，则必须将侦听器添加到添加的内容中。但是很多eventListeners并不好，我建议你使用按钮onclick属性：

<button class="btn-action-edit" onclick="itemEdit(this);"> ... </button>
<button class="close-edit" onclick="closeItemEdit(this);"> ... </button>

<script>
function itemEdit( element )
{
    $(this).closest('tbody').find('.detail-edit').toggleClass('open');
}

function closeItemEdit( element )
{
    $(this).closest('tbody').find('.detail-edit').toggleClass('open');
}
</script>

jQuery在点击按钮

2 个答案: