jQuery的多选犯规动态添加的元素上工作到HTML页面 [英] jquery multiselect doesnt work on dynamically added element into html page

问题描述

我使用的js调用这样的js函数动态创建元素

I dynamically create element using js calling js function like this

function addElement(){
    var counter = 1;
    var newdiv = document.createElement('div');
    newdiv.id='dynamicdiv' + counter;
    newdiv.innerHTML += "<select class=\"checkedValues\" multiple=\"multiple\"><option value=\"1\">One</option><option value=\"2\">Two</option></select>";
    document.getElementById(divName).appendChild(newdiv);
    counter++;
}

在页面加载 jQuery的多选效果适用

$(function() {
   $('.checkedValues').multiselect({
        includeSelectAllOption: true
    });
});  

这动态插入元素的这个效果不工作。如何申请呢？

This effect doesnt work on this dynamically injected element. How to apply it?

推荐答案

您已经注射元后，再次调用它，因为你的第一个code是刚开执行一次， DOM 是加载，而你是通过JS将元素添加到DOM后DOM是装：

You have to call it again after injecting element, because your first code is just getting executing once when DOM is loaded, and you are adding elements to DOM via js after DOM is loaded:

function addElement(){
    var counter = 1;
    var newdiv = document.createElement('div');
    newdiv.id='dynamicdiv' + counter;
    newdiv.innerHTML += "<select class=\"checkedValues\" multiple=\"multiple\"><option value=\"1\">One</option><option value=\"2\">Two</option></select>";
    document.getElementById(divName).appendChild(newdiv);
    counter++;

    $(newdiv).find('.checkedValues').multiselect({
     includeSelectAllOption: true
   });  // call it here again
}

这篇关于jQuery的多选犯规动态添加的元素上工作到HTML页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！