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

jquery multiselect不能动态添加元素到html页面

3 个答案: