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

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

$(".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(); 
});

此代码由于某种原因对曲目列表没有影响。如果我从样式表显示中删除：none;该列表是可见的，并且在JQuery中编写的内容根本不会隐藏它。我也尝试过纯粹的css解决方案，它也无法工作。

感谢您的帮助！

来源

2012-03-05 San Rabid

显示您的HTML。 – 2012-03-05 18:32:32

更好，创建一个小提琴演示 – Starx 2012-03-05 18:36:47

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

你有两个选择：

写你以后在插件代码编写的代码。
使用代表活动，如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被放置到页面中时，页面中的内容为。或者，使用委托事件来附加处理程序事件，如下所述。

委托事件的优点是它们可以处理来自后裔事件的事件，这些事件稍后添加到文档中。作者：挑选一个在连接了委托事件处理程序时保证出现的元素，可以使用委派的事件到，避免需要经常附加和删除事件处理程序。例如，这个元素可能是模型 - 视图 - 控制器设计中的视图的容器元素，或者处理程序想要监视文档中的所有冒泡事件的文档。文档元素在加载任何其他HTML之前在文档的头部中可用，因此在没有等待文档准备就绪的情况下附加事件是安全的。

来源

2012-03-05 18:33:14 gdoron

谢谢！使用.live也工作 – 2012-03-05 22:28:07

@SanRabid。是的，但不推荐使用。 'on'是可以使用的功能。查看更新。附：你应该接受一个答案，如果你有一个... – gdoron 2012-03-06 06:42:43

谢谢！我还没有看到更新，对不起。我会检查它是如何工作的！ – 2012-03-07 17:34:07

使用delegate

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

可能的原因是因为插件给正在运行中的元素，它是后来在DOM插入Click事件处理程序不会绑定到它，这样你就可以使用事件委托给document或层次结构中的某个更高元素。

来源

2012-03-05 18:32:23 JIA

谢谢你的时间！有效。我也试过这个$（'。tplaylist'）。live（“click”，function（）{//''hidetracks'）。slideToggle（'slow'，function（）{ \t //动画完成。）; \t}）; – 2012-03-05 22:26:14

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

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

你不需要“显示：none”和“显示：块”，因为jQuery也为你好。

来源

2012-03-05 18:33:51 Andrew

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

回答

相关问题