克隆引導元素，但不是所有的事件偵聽器

在這個問題Cloning a bootstrap element with an event listener我問如何克隆一個元素而不復制引導程序提供的事件偵聽器。答案是不通過true到clone()命令。克隆引導元素，但不是所有的事件偵聽器

事實證明，我現在看到我的問題比這更復雜一點。我實際上有一個div，其中一個div包含幾個按鈕，其中一個控制關聯div的展開/摺疊，另一個提供其他專用功能，這些功能由創建原始內容時在javascript中添加的複雜點擊偵聽器提供。我需要在其他按鈕上保留click（）監聽器。如果我在沒有true的說法的情況下致電clone()，我也會失去所有這些聽衆。

那麼有什麼方法可以讓clone(true)與監聽器，但從展開/合同按鈕中刪除引導程序提供的克隆監聽器，更改ID爲唯一ID，然後以某種方式仍然可以獲得引導提供的崩潰功能（添加我猜，聽衆再次基於克隆的div中新的改變的ID）？

我正在創建一堆不同的可摺疊對象，然後將其中的一些克隆到另一個選項卡窗格中。

我的代碼的簡化版本：

<div class="container"> 
    <button aria-expanded="false" data-target="#collapsible_obj_0" data-toggle="collapse" class="btn btn-link collapsed">click here</button> 
    <div style="height: 0px;" aria-expanded="false" id="collapsible_obj_0" class="collapse"> 
    <span>foo</span> 
    <button class="btn bar-btn">bar</button> 
    </div> 
</div>

而且從JavaScript的一個片段：

$("#collapsible-obj-0 .bar-btn").click(function() { 
    // do a bunch of stuff 
    }); 

    this.collapsibleObjCounter = 15; // really this will be one more than the number of exiting objects 

    // objectContainer is the jquery object representing the top level div (passed into this method) 

    var header = objectContainer.clone(true); // or not true, that is the question.... 
    var counter = this.collapsibleObjCounter++; 
    var collapseId = "collapsible_obj_" + counter; 
    header.find(".collapse").attr("id", collapseId); 
    header.find("button[data-toggle='collapse']").attr("data-target", "#"+collapseId);

我需要在這裏取消對「點擊這裏」按鈕事件處理程序和引導程序根據更改的ID添加新的引導程序。如果我克隆沒有true標誌似乎正常工作，但我失去了「酒吧」按鈕的click（）功能。實際上，我有很多「欄」按鈕，其功能需要保留。因此，手動將click（）行爲複製到克隆版本將會很麻煩，但可能。但理想情況下，我認爲我想要的是當我更改摺疊按鈕和關聯div上的ID時，只刪除一個事件處理程序，並獲得引導以自動創建新的事件處理程序。

我很抱歉，這不是可運行的代碼 - 有太多的上下文，以至於很難推出一個簡化的可運行示例。

來源

2016-08-01 PurpleVermont

您應該嘗試使用.on()方法委派這些事件處理程序。

$('body').on('click', '.bar-btn', someFunc);

增加了一個Jsfiddle加上委託處理程序。

事件代表團的好處：

您可能不需要複製/克隆這些處理器都

它會工作得很好了，在以後的時間作爲DOM動態添加節點（通過冒泡）。

所以，上面的代碼將觸發事件處理程序someFunc上的點擊酒吧BTN即使是克隆後粘貼的ObjectContainer的一個實例。

要了解更多信息，請查看關於event delegation和bubbling的鏈接。

來源

2016-08-05 06:36:17

克隆引導元素，但不是所有的事件偵聽器

回答

相關問題