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

现在，关于如何将javascript事件绑定到InnerHTMLDOM元素，我面临着一个严重的问题。我有一个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>

我做了很多研究来解决这个问题。但是没有正常工作。 请帮我解决这个问题。提前感谢

我的完整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);
});                 

函数removepersist（事件）
{
console.log（“在removepersist中”）；
var pa=$（event.target）.closest（“div”）.prop（“id”）；
var pa_数据=$（event.target）.closest（“div”）.prop（“id”）；
var祖父母=$（'#'+pa）.parent（）.prop（“id”）；
var internal_data=document.getElementById（pa）.innerHTML；
如果（祖父母=='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\u class”；
check.onclick=function（）
{
检查工作（ig_id、事件）；
}
document.getElementById（'text_holder'）.appendChild（检查）；
var holder2_unused=internal_data.substr（0，internal_data.indexOf（'：'）；
var holder2_实际=内部数据。替换（holder2_未使用“”）；
document.getElementById（“text\u holder2”）.innerHTML=holder2\u实际值；
$（“#persist:input”）.attr（“disabled”，true）；
var unused_part=internal_data.substring（internal_data.lastIndexOf（“试试这个。在这里，我用一个按钮替换了复选框，该按钮响应单击。您可以简单地用复选框替换它


函数checkFunc（）{
var previous_ig_content=document.getElementById（“文本持有者”）.innerHTML；
var previous_brand_content=document.getElementById（“text_holder2”）.innerHTML；
var childDiv=document.createElement（'div'）；
childDiv.id=“newDiv”；
childDiv.onclick=alertMess；
childDiv.style.backgroundColor=“红色”；
childDiv.style.cursor=“pointer”childDiv.innerHTML=previous\u ig\u content+previous\u brand\u content；
document.getElementsByTagName（'body'）[0].appendChild（childDiv）；
}
函数alertMess（）{
警报（“哦！您单击了生成的div”）；
}

“润滑剂”
点击我
SKF，FAG
在那里使用本机javascript您可以使用
innerHTML
或-但它们只克隆内联侦听器，而不克隆使用
addEventListener的侦听器
-请参见下面的演示：


//复选框侦听器
document.querySelectorAll（'input[type=checkbox]'）[0]。addEventListener（'click'，function（））{
控制台日志（“单击”）；
});
//克隆和附加
document.body.appendChild（document.querySelectorAll（'.wrapper'）[0].cloneNode（true））；
//内联侦听器
函数内联（）{
控制台日志（“内联”）；
}
.wrapper{
填充：10px；
边框：1px纯红；
显示：内联块；
垂直对齐：中间对齐；
}

是/否
你知道
.innerHTML
会覆盖分配给它的所有内容，对吗？是的，但这是一个覆盖的问题吗？我不知道。如果不覆盖，那么如何解决我的问题。什么是
ig_id
？它没有定义，加上
子类div
需要在创建后的某个时候附加到DOM中。你能添加ful吗l javascriptcode@Abhradip如果您返回，请确保您提供了一个。这应该不是问题，因为您已经让它基本正常工作了，不要忘记包括正在消失的事件，因为我现在没有看到。我使用了复选框，事实上复选框也是由javascript和e事件当时是绑定的。我认为这是造成问题的原因。DOM上实际上没有该复选框。它是由一些javascript创建的。好吧。但您可以在生成它的位置向它添加一个单击事件。就像我们在本例中在生成的div上附加一个onclick事件一样：
childDiv.onclick=“newFunction（）"
我将编辑我的答案并将其显示给您。现在给我五个查看它。当您单击生成的div时，我在其上附加了一个单击事件。如果这解决了您的问题，请您接受并向上投票我的答案。您已经写了一行作为childDiv.onclick=alertMess；它工作正常。现在，如果我需要向alertMess f发送一些参数那么如何编写它呢？它应该是像childDiv.onclick=alertMess（x，y）或其他任何东西吗
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);
});