事件处理程序不适用于动态添加的元素

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

如果您希望它也适用于动态生成的输入，则必须稍微更改您的函数。

对于动态生成的输入 (Demo)，这不起作用

$('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在中的声明！

当你点击任何.repeat按钮时，你是在克隆当前的#repeatable并改变它的id，但是你忘记了改变.startLEDs和.endLEDs元素id的，这就是为什么当你点击第一个#repeatable下面的#repeatable时，选择器永远不会工作，因为浏览器永远不会找到这些方形元素，而是找到页面中的第一个！

不是将id与.startLEDs和.endLEDs元素关联，而是将另一个数据属性关联起来，比如‘-id’或可以重复的内容。

你还有另一个问题，因为你用于选取器的插件将选取器附加到id为‘#picker_wrapper’的点击的led ( a元素)数据上，当你克隆#时，你也克隆了选取器元素，所以出于同样的原因，即使在将led更改为-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:我没有更改您的任何类，因为您可能会在项目中以某种方式需要它们