如何将javascript函数绑定到DOM上动态添加的元素？

我试图使用在codrop中找到的一些使用完整JavaScript代码来创建自定义选择框，但我无法绑定此JavaScript函数

(function() {
        [].slice.call( document.querySelectorAll( 'select.cs-select' ) ).forEach( function(el) {
            new SelectFx(el);
        } );
    })();

要动态添加元素

演示代码：

让我们介绍一下

$（'body'）。在（'click'，'cs select'，函数（事件）{
console.log（'I fired！！！'）；
新SelectFx（本）；
});
$（'.add'）。单击（函数（）{
$（'.container'）.append（'Select a country francesouth Africa'）；
});

但是你可能想触发一个函数，对吗

---

根据下面的评论讨论更新了我认为正确的内容。谢谢@斜视

$('.add').click(function() {
  var $newElement = $('<select class="cs-select cs-skin-elastic"><option value="" disabled selected>Select a Country</option><option value="france" data-class="flag-france">France</option><option value="south-africa" data-class="flag-safrica">South Africa</option></select>');

  $('.container').append($newElement);
  new SelectFx($newElement[0]);
});

$（'.add'）。单击（函数（）{
var$newElement=$（“选择非洲南部的一个国家”）；
$（'.container'）.append（$newElement）；
新SelectFx（$newElement[0]）；
});

这是我的演示代码，我不知道这里有什么问题。您是说

select.cs select

元素是在该代码运行后添加的吗？如果是这样的话，那么它自然不会受到影响。创建时需要运行

new SelectFx（new_elem）

。没有单击或事件，因此不需要事件委派方法，应该可以正常工作。除了事件委派之外，还有其他问题……仅供参考，您不需要先

.slice（）

集合。这只是浪费资源。只需执行

[].forEach.call（document.querySelectorAll（…），function（el）{…}）谢谢@squint会尝试让您知道我在问题中没有看到他使用jQuery的迹象。@squint-查看
。单击
处理程序和
。追加
。在演示代码链接中。就我而言，场外信息与问题无关。但是，即使他正在使用它，我也不知道绑定一个
点击
处理程序与问题中的代码有什么关系。@ÄñäñdAyan：区分新代码和原始代码的唯一方法是给它们一些属性，比如类来区分它们。但你不需要这么做。创建新的元素时，元素就在您的手中，因此只需在当时应用该函数即可。@斜视-您是对的，我对问题的理解是错误的。当用户点击添加按钮时，他可能想调用
newselectfx（el）
。
$('.add').click(function() {
  var $newElement = $('<select class="cs-select cs-skin-elastic"><option value="" disabled selected>Select a Country</option><option value="france" data-class="flag-france">France</option><option value="south-africa" data-class="flag-safrica">South Africa</option></select>');

  $('.container').append($newElement);
  new SelectFx($newElement[0]);
});