jquery multiselect不适用于将元素动态添加到html页面中答案

【问题标题】：jquery multiselect doesnt work on dynamically added element into html pagejquery multiselect不适用于将元素动态添加到html页面中
【发布时间】：2015-05-25 21:22:25
【问题描述】：

我使用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
    });
});

此效果不适用于此动态注入的元素。如何申请？

【问题讨论】：

停下来想一想……代码如何转换尚不存在的东西？
当然，谢谢 :)

标签： javascript jquery html asp.net-mvc

【解决方案1】：

您必须在注入元素后再次调用它，因为您的第一个代码在加载 DOM 时才执行一次，并且您在加载 DOM 后通过 js 向 DOM 添加元素： p>

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
}

【讨论】：

应该只针对新元素，而不是整个类

【解决方案2】：

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

 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
  }); 
}

【讨论】：

【解决方案3】：

您需要在新元素上调用代码。代码不会神奇地监听要添加到页面的新元素。

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

【讨论】：