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

Question

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

除了一件事，我已经成功完成了所有这些。当我使用 innerHTML 将复选框从先前的 div 放置到新创建的 div 时，它被放置时没有绑定(bind) 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>