jQuery 扩展标签无法正常工作

Question

我一直在尝试使锚标记上的展开折叠起作用，但不知何故我遗漏了一些东西。我浏览了这里几乎所有的链接，但没有发现我的代码和帮助选项之间的区别。

我想要的只是通过单击任何行的“+”符号进行简单展开。我正在 javascript 文件中即时构建 div。不知何故我只能展开所有备用行。所以如果我的回复有5个元素，我只能隔行展开！有人能告诉我哪里出了问题吗？

谢谢，

真百合

function DisplayResultsGrid(obj) {
    $.each(obj, function(index, item) {
        $("#divRequestDetails").append('<div class="requestDetailItem"><a href="#" class="lnkRequest"> + </a><div class="toggleDays">This is the text to expand</div></div>').append('<div class="rowSeparator"></div');
        $('.toggleDays').hide();
        $('.lnkRequest').click(function() {
            $(this).next('.toggleDays').toggle();
        });
    });
}

Answer 1

您每次循环时都在向所有 .lnkRequest 元素附加一次点击。您没有将事件添加到当前事件。所以第一个会有第一次点击事件，加上下一个，再加上第三个，等等

您需要在每个循环之外分配事件或使用事件委托。

function DisplayResultsGrid(obj) {
    $.each(obj, function(index, item) {
        $("#divRequestDetails").append('<div class="requestDetailItem"><a href="#" class="lnkRequest"> + </a><div class="toggleDays">This is the text to expand</div></div>').append('<div class="rowSeparator"></div');
    });
    $('.toggleDays').hide();
    $('.lnkRequest').click(function() {
        $(this).next('.toggleDays').toggle();
    });
}

jQuery 扩展标签无法正常工作

jQuery Expand a tag not working correctly

javascript

expand

jquery-ui

collapse