Question

现在我面临着关于如何将javascript事件绑定到innerHTML DOM元素的严重问题。我有一个div，在该div中有一个输入复选框，一些javascript事件已经绑定到该复选框。我有另一个div，那里写了一些文字。现在通过javascript我需要创建一个div，新创建的div的内容将是其他两个现有div的内容，当复制并将其放置到新创建的div时，javscript事件对于复选框将完好无损。

除了一件事，我已经成功完成了所有这些。当我使用innerHTML将前一个div的复选框放置到新创建的div时，它被放置时没有与它绑定的javascript事件。

我的HTML结构如下：

<div id="text_holder">
"Lubricant"
<input type="checkbox" id="Lubricantc" class="check_class">
</div>

<div id="text_holder2">
SKF,FAG
</div>

text_holder和text_holder2是我现有的两个div。

现在用于创建另一个div并从这两个前面的div中复制数据并将其放在新div中的javascript代码是：

var previous_ig_content=document.getElementById("text_holder");
var previous_brand_content=document.getElementById("text_holder2");
var child_div=document.createElement('div');
child_div.id=ig_id+"div";
child_div.innerHTML=previous_ig_content.innerHTML+previous_brand_content.innerHTML;

我已经做了很多研究来解决这个问题。但没有正常工作。请帮我解决这个问题。在此先感谢!!!

我的完整javascript如下： -

function removepersist(event)
{
    console.log("in removepersist");

    var pa=$(event.target).closest("div").prop("id");
    var pa_data=$(event.target).closest("div").prop("id");
    var grandparent=$('#'+pa).parent().prop("id");

    var inner_data=document.getElementById(pa).innerHTML;

    if (grandparent=='persist')
    {


      document.getElementById('text_holder').innerHTML=pa_data.replace('div','')+"   ";
      var ig_id=event.target.id.slice(0,-1);
      var check=document.createElement('input');
      check.type='checkbox';
      check.id=event.target.id;
      check.className="check_class";
      check.onclick=function()
      {
        checkwork(ig_id,event);
      }

      document.getElementById('text_holder').appendChild(check);
      var holder2_unused=inner_data.substr(0, inner_data.indexOf(':')); 
      var holder2_actual=inner_data.replace(holder2_unused,'');
      document.getElementById("text_holder2").innerHTML=holder2_actual;

      $("#persist :input").attr("disabled", true);

     var unused_part=inner_data.substring(inner_data.lastIndexOf("<"),inner_data.lastIndexOf(":")+1);
     var reqd_data=inner_data.split(unused_part);
     var item_group_name=reqd_data[0];
     var brands_names=reqd_data[1].split(',')

     for (i=0;i<brands_names.length;i++)
     {
      if(brands_names[i].includes("(AD)"))
      {
        new_brand_name=brands_names[i].replace('(AD)','')
        $(".brand_tag[value="+new_brand_name+"]").attr("checked", true);
        $(".dealer_tag[value="+new_brand_name+"]").attr("checked", true);
      }
      else
      {
        new_brand_name=brands_names[i]
        console.log("- - - - -");
        console.log(""+brands_names[i]+"jigsaw");
        //$(".brand_tag[value="+new_brand_name+"]").prop("checked", true);
        //$("input[name=brand_id[]][value="+new_brand_name+"]").attr('checked', 'checked');
        console.log("++++++");

      }
     }


    }

    var to_be_removed=document.getElementById(pa);
    to_be_removed.parentNode.removeChild(to_be_removed);
}
function checkwork(ig_id,event)
{
  console.log("in checkwork for : "+ig_id+" and "+event.target.id);

  var previous_ig_content=document.getElementById("text_holder");
  var previous_brand_content=document.getElementById("text_holder2");
  var child_div=document.createElement('div');
  child_div.id=ig_id+"div";
  child_div.innerHTML=previous_ig_content.innerHTML+previous_brand_content.innerHTML;


  document.getElementById('persist').appendChild(child_div);

  $("#persist :input").attr("disabled", false);
  $("#persist :input").attr("checked", true);

  $('.itemgroup_tag').prop('checked',false);
  $('.brand_tag').prop('checked',false);
  $('.dealer_tag').prop('checked',false);


  document.getElementById('text_holder').innerHTML="";
  document.getElementById('text_holder2').innerHTML="";

}

$('.check_class').click(function() {                                //This is for the existing checkbox in persist
    console.log("by existing check");
    removepersist(event);

});




$(".itemgroup_tag").click(function() {

document.getElementById('text_holder').innerHTML=$(this).prop('value')+"   ";
var ig_id=$(this).prop('value');
var check=document.createElement('input');
check.type='checkbox';
check.id=$(this).prop('value')+"c";
check.className="check_class";
check.onclick=function () {            //this part is for appending the content of text_holder and text_holder2 to persist 

   checkwork(ig_id,event); 
}

 document.getElementById('text_holder').appendChild(check);
});

Answer 1

试试这个。在这里，我用一个按钮取代了复选框，按钮响应了点击。你可以简单地用复选框替换它。

function checkFunc(){
    var previous_ig_content=document.getElementById("text_holder").innerHTML;
  var previous_brand_content=document.getElementById("text_holder2").innerHTML;
  var childDiv = document.createElement('div');
  childDiv.id="newDiv";
 childDiv.onclick =alertMess;
 childDiv.style.backgroundColor = "red";
 childDiv.style.cursor = "pointer";   childDiv.innerHTML=previous_ig_content+previous_brand_content;
  document.getElementsByTagName('body')[0].appendChild(childDiv);
}

function alertMess(){
  alert("oh! you clicked the generated div");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text_holder">
"Lubricant"
<!-- <input type="checkbox" id="Lubricantc" class="check_class" ></input> -->
<button onclick="checkFunc()">Click me</button>
</div>
<div id="text_holder2">
SKF,FAG
</div>

Answer 2

使用原生javascript，您可以使用innerHTML或cloneNode - 但他们只会克隆内联听众而非使用addEventListener的人 - 请参阅下面的演示：

＆＃13;

// checkbox listener
document.querySelectorAll('input[type=checkbox]')[0].addEventListener('click', function() {
  console.log("clicked");
});

// clone and append
document.body.appendChild(document.querySelectorAll('.wrapper')[0].cloneNode(true));

// inline listener
function inline() {
  console.log("inline");
}

＆＃13;

.wrapper {
  padding: 10px;
  border: 1px solid red;
  display: inline-block;
  vertical-align: middle;
}

＆＃13;

<div class="wrapper">
  <span>Yes / No</span>
  <input type="checkbox" onclick="inline()" />
</div>

＆＃13;

<强>解决方案

如果你使用Jquery，你有一个解决方案 - 它有clone()方法 - 克隆（true）指示它也复制事件处理程序！请参阅下面的演示：

＆＃13;

$(function() {
  // checkbox listener
  $('input[type=checkbox]').on('click', function() {
    console.log("clicked");
  });
  // clone and append
  $('body').append($('.wrapper').clone(true));
});

// inline listener
function inline() {
  console.log("inline");
}

＆＃13;

.wrapper {
  padding: 10px;
  border: 1px solid red;
  display: inline-block;
  vertical-align: middle;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <span>Yes / No</span>
  <input type="checkbox" onclick="inline()" />
</div>

＆＃13;

关于将javascript事件与innerHTML DOM元素绑定的问题

2 个答案: