顯示/隱藏由插件創建的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

回答

相關問題