[英]How to bind a javascript function to dynamically added Element on DOM?
I am trying to use some use-full JavaScript code I found in codrop for creating custom select box, but i'm failing to bind this javascript function 我正在尝试使用在codrop中找到的一些使用完全的JavaScript代码来创建自定义选择框,但是我无法绑定此javascript函数
(function() {
[].slice.call( document.querySelectorAll( 'select.cs-select' ) ).forEach( function(el) {
new SelectFx(el);
} );
})();
to dynamically added element. 动态添加元素。
Demo Code : http://codepen.io/AnandAyan/pen/rVpGPJ 演示代码: http : //codepen.io/AnandAyan/pen/rVpGPJ
Let's introduce jQuery .on 让我们介绍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 http://codepen.io/anon/pen/VLyMJO
But you probably want to trigger a function on the change though right? 但是您可能想在更改上触发一个功能,对吗?
UPDATED based on the comment discussion below with what I think is correct. 基于以下的东西,我认为是正确的注释讨论更新 。 Thanks @squint.
谢谢@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]);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.