Question

我正在使用soundcloud插件，默认情况下会显示跟踪列表。我需要做的是使用一个按钮来切换该列表的可见性，所以我编辑了.js代码，现在它在轨道列表旁边添加了一个“tplaylist”类的按钮。出于某种原因，我无法隐藏列表，也无法再次使其可见。用css我可以设置display：none;它消失但我无法再显示它。我的代码是：

$(".sc-player ol.sc-trackslist").css('display', 'none');
$(".sc-player ol.sc-trackslist").css('display', 'block');

$(".tplaylist").click(function(){
  $(".sc-player ol.sc-trackslist").toggle();
});

此代码由于某种原因对跟踪列表没有影响。如果我从样式表中删除display：none;列表是可见的，JQuery中写的内容根本不会隐藏它。我也尝试过纯css解决方案，它也不起作用。

感谢您的帮助！

Answer 1

使用delegate

$(document).delegate("click",".tplaylist",function(){
$(".sc-player ol.sc-trackslist").toggle();
});

可能的原因是因为插件在运行中创建了元素，即稍后在DOM中插入click事件处理程序不会绑定到它，因此您可以将事件委托用于document或层次结构中的一些更高元素。

Answer 2

这些元素是在代码之后创建的，因此事件未附加到元素上。

您有两种选择：

在编写插件代码的地方之后编写代码。
使用代理事件，例如on或delegate。

on版本：

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

$('#container').on('click', '.tplaylist',function(){
    $('.sc-player ol.sc-trackslist').toggle();
});

on有用的docs：

事件处理程序仅绑定到当前选定的元素;他们   在您的代码调用.on（）时，页面上必须存在。   要确保元素存在且可以选择，请执行事件   绑定在文档就绪处理程序中的元素   页面上的HTML标记。如果将新HTML注入页面，   选择元素并在新HTML之后附加事件处理程序   放入页面。或者，使用委派事件来附加事件   处理程序，如下所述。

委派事件的优势在于它们可以处理来自的事件   后代元素，稍后会添加到文档中。   选择一个保证在当时存在的元素   委托事件处理程序附加，您可以使用委托事件   避免频繁附加和删除事件处理程序的需要。这个   element可以是a中视图的容器元素   例如，模型 - 视图 - 控制器设计，或者如果事件是文档   handler希望监视文档中的所有冒泡事件。该   文档元素在之前的文档头部中可用   加载任何其他HTML，因此可以安全地在那里附加事件   等待文件准备好。

Answer 3

你这太难了。只需使用切换：

$('.tplaylist').click(function () {
    $('.sc-player ol.sc-trackslist').toggle();
});

你不需要“display：none”和“display：block”，因为jQuery会为你做这件事。

显示/隐藏由插件创建的ol

3 个答案: