jQuery的多选犯规动态添加的元素上工作到HTML页面

Question

我使用动态JS调用js函数像这样

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 multi select effect创建元件应用于

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

这种效应不工作的这个动态注入的元素。如何应用它？

Answer 1

你必须注入元素之后再次调用它，因为你的第一个代码是刚开的时候DOM加载执行一次，你是DOM被加载后通过JS将元素添加到DOM：

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 
} 

Answer 2

您需要调用新元素上的代码。该代码不会奇迹般地侦听要添加到页面的新元素。

var counter = 1; 

function addElement() { 
    var newdiv = $("<div/>", { 
    id: 'dynamicdiv' + counter 
    }); 
    var select = $("<select class=\"checkedValues\" multiple=\"multiple\"><option value=\"1\">One</option><option value=\"2\">Two</option></select>"); 
    newDiv.append(select); 
    $("#" + divName).append(newdiv); 
    select.multiselect({ 
    includeSelectAllOption: true 
    }); 
    counter++; 
} 

Answer 3

可以追加后多选绑定到最近添加的项目：

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++; 

    $('#'+divName+' .checkedValues:last').multiselect({ 
    includeSelectAllOption: true 
    }); 
}