Question

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

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

动态添加元素。

演示代码：http://codepen.io/AnandAyan/pen/rVpGPJ

Answer 1

我们来介绍jQuery .on

$('body').on('click', '.cs-select', function(event) {
  console.log('I fired!!!');
  new SelectFx(this);
});

$('.add').click(function() {
  $('.container').append('<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>');
});

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

但是你可能想要在变化时触发一个函数吗？

更新基于以下评论讨论，我认为是正确的。谢谢@squint。

$('.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]);
});

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

1 个答案: