事件處理程序不適用於動態添加的元素

Question

我正在嘗試找到一種將事件處理程序分配給動態創建的每個框的方法。 現在，用戶可以單擊“在上方添加”或“在下方添加”，無論他們單擊何處，都會出現兩行框。

我還試圖做到這一點，以便當用戶單擊特定的正方形時，將彈出colorPicker並可以更改特定正方形的顏色。

但是由於某種原因，僅當用戶單擊前兩行正方形時才會彈出選色器。 如果在當前集的下方或上方動態添加了更多行，則單擊正方形將無任何反應。

有誰知道為什么會這樣？

到目前為止我已經做過/嘗試過的是：

http://codepen.io/anon/pen/bwBRmw

var theParent = document.querySelector(".container");
theParent.addEventListener("click", doSomething, false)
function doSomething(e) {
   console.log("gets inside doSomething")
   console.log(e.target)
   console.log(e.currentTarget)
if (e.target !== e.currentTarget && e.target.id !== "") {
    var clickedItem = e.target.id;
    console.log("Clicked on " + clickedItem);
    var led = document.getElementById(clickedItem)

    if(!picker){
        console.log("new picker initialized")
        picker = new Picker(led)
    }
    else{
        console.log("gets inside else case")
        picker.settings.parent = led;
    }
    picker.show();

}
 picker.on_done = function(colour) {
    $(led).css('background-color',colour.rgba().toString());
    picker.hide()
    }

//e.stopPropagation();
}

Answer 1

如果您希望它也適用於動態生成的輸入，則必須稍作更改。

這不適用於動態生成的輸入 （ 演示 ）

$('input').keyup(function() {
    for (var i = 0; i < triggerWords.length; i++) {
        if ($(this).val().toLowerCase().indexOf(triggerWords[i]) != -1) {
            alert("Alert! You've typed a blocked word.");
        }
    }
});

但這確實是 （ Demo ）

 $(document).on('keyup', 'input', function() {
    for (var i = 0; i < triggerWords.length; i++) {
        if ($(this).val().toLowerCase().indexOf(triggerWords[i]) != -1) {
            alert("Alert! You've typed a blocked word.");
        }
    }
});

Answer 2

$(document).on('click', '.your-element', function (e) {
  e.preventDefault();

  doSomething();
);

Answer 3

您的事件處理程序實際上運行良好，問題在於您的ID在HTML中的聲明！

當您單擊任何.repeat按鈕時，您正在克隆當前的#repeatable並更改其ID，但是卻忘記更改.startLEDs和.endLEDs元素ID ，而這些ID最終會重復出現，這就是為什么選擇器在您無法使用時在第一個#repeatable下面的#repeatable正方形中單擊，因為瀏覽器從未找到這些正方形元素，而是在頁面中找到第一個正方形！

無需將id關聯到.startLEDs和.endLEDs元素，而是可以關聯另一個數據屬性 ，例如' data-id '或可以重復的內容。

您還會遇到另一個問題，因為用於選擇器的插件會將選擇器附加到ID為'#picker_wrapper'的單擊的led （ a元素）中 ，因此當您克隆#repeatable時， 您還將克隆選擇器元素 ，因此，出於同樣的原因，即使將led id更改為data-id， 克隆后頁面中第一個選擇器下方的選擇器也將停止工作 。 要解決此問題，在克隆之前，我們應該首先銷毀或從DOM中刪除上次使用的選擇器。

這是一個可能的解決方案：

 // vars var repeatableId = 0, picker, $led; // functions function removePicker () { if (picker) { $led.removeClass('selected').find('#picker_wrapper').remove(); picker = null; } } function onPickerDone (color) { $led.css('background-color', color.rgba().toString()); removePicker(); } $(document).ready(function () { // event listeners $('body').on('click', '.repeat', function (e) { var $self = $(this), $parent = $self.parent(), $parentClone; removePicker(); $parentClone = $parent.clone(true).attr('id', 'repeatable' + ++repeatableId); if ($self.hasClass('add-bottom')) { $parent.after($parentClone); } else { $parent.before($parentClone); } }); $('.container').on('click', function (e) { var $target = $(e.target); if ($target.hasClass('js-led')) { removePicker(); $led = $target; $led.addClass('selected'); picker = new Picker($led[0]); picker.on_done = onPickerDone; picker.show(); } }); }); 

 .bottomdiv { clear: both; position: fixed; bottom: 0; height: 50%; width: 100%; font-size: 16px; text-align: center; overflow: auto; } .bottomdiv > .container { margin-top: 60px; float: left } .bottomdiv > .container > .repeatable > .timeMilli { display: inline-block; } .bottomdiv > .container > .repeatable > .repeat { display: block; } .bottomdiv > .container > .repeatable a { position: relative; display: inline-block; width: 30px; height: 30px; background-color: #ccc; border: 1px solid #000000; z-index: 0; } .bottomdiv > .container > .repeatable a.selected { z-index: 1; } 

 <script src="http://iamsaravieira.com/picker.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <div class="bottomdiv"> <div class="container"> <div class="repeatable"> <button class="repeat add-top">Add above</button> <div class="startLEDs"> <a class="js-led startLEDs" data-id="sLED1"></a> <a class="js-led startLEDs" data-id="sLED2"></a> <a class="js-led startLEDs" data-id="sLED3"></a> <a class="js-led startLEDs" data-id="sLED4"></a> <a class="js-led startLEDs" data-id="sLED5"></a> <a class="js-led startLEDs" data-id="sLED6"></a> <a class="js-led startLEDs" data-id="sLED7"></a> <a class="js-led startLEDs" data-id="sLED8"></a> <a class="js-led startLEDs" data-id="sLED9"></a> <a class="js-led startLEDs" data-id="sLED10"></a> <a class="js-led startLEDs" data-id="sLED11"></a> <a class="js-led startLEDs" data-id="sLED12"></a> </div> <div class="endLEDs"> <a class="js-led endLEDs" data-id="eLED1"></a> <a class="js-led endLEDs" data-id="eLED2"></a> <a class="js-led endLEDs" data-id="eLED3"></a> <a class="js-led endLEDs" data-id="eLED4"></a> <a class="js-led endLEDs" data-id="eLED5"></a> <a class="js-led endLEDs" data-id="eLED6"></a> <a class="js-led endLEDs" data-id="eLED7"></a> <a class="js-led endLEDs" data-id="eLED8"></a> <a class="js-led endLEDs" data-id="eLED9"></a> <a class="js-led endLEDs" data-id="eLED10"></a> <a class="js-led endLEDs" data-id="eLED11"></a> <a class="js-led endLEDs" data-id="eLED12"></a> </div> <div class="timeMilli">Time(ms): <input type="text" name="time" form="form1"></div> <button class="repeat add-bottom">Add below</button> </div> </div> </div> 

結論

-切勿在HTML中使用重復的ID

PS： 我沒有更改任何班級，因為您可能以某種方式在項目中需要它們