Question

我使用jquery在页面中动态创建表内容，如何获取此动态故事的行号索引？在下面的代码中，当我点击＆＃34;显示更多＆＃34;链接，我在下面的代码中使用索引函数，但它现在工作。如何解决这个问题？感谢。

 $.getJSON(JsonURL,
        function(data){

            $.each(data, function(index, item){
                var obj = item;
                books.push(book);
            });
            for (var i = 0; i<obj.length; i++) {
                var tr=$('<tr></tr>'); 
                $('<td>'+ obj[i].name +'</td>').appendTo(tr);
                $('<td>'+ obj[i].category +'</td>').appendTo(tr);
                $('<td><a class=\'showMore\' href=#>'+ 'show more' +'</a></td>').appendTo(tr);
                tr.appendTo('#tableBody');
            };
    });
    $('a .showMore').on('click', function(event) {
        var rowindex = $(this).parent().parent().children().index($(this).parent);
        console.debug('rowindex', rowindex);
    });

Answer 1

您需要使用 event delegation 来动态创建元素：

事件委托允许我们将单个事件监听器附加到父元素，将为匹配选择器的所有子项触发，这些孩子现在是否存在，或将来是否存在。

$('body').on('click', 'a.showMore', function(event) {
    var rowindex = $(this).closest('tr').index();
    console.debug('rowindex', rowindex);
});

请注意，a和.showmore之间不需要空格，因为a .showmore会选择任何类showmore的元素，这是一个锚的子节点。

另外，.parent()是一种方法，因此如果您想使用()，则parent之后需要.parent()。

另一个建议是，您可以使用 .closest()

而不是多个parent()方法。

Answer 2

您可以尝试：

$(document).on('click', '.showMore', function(event) {
    var rowindex = $(this).closest('tr').index();
    console.debug('rowindex', rowindex);
});

Answer 3

你应该使用event delegation

$(document).on('click',".showMore", function(event) {
    var rowindex = $(this).parents("tr").index();
    console.debug('rowindex', rowindex);
});

事件委托允许您将单个事件侦听器附加到父元素，该元素将为匹配选择器的所有子项触发，无论这些子项现在是存在还是将来添加。

如何通过jQuery在动态表中获取行索引

3 个答案: