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

【问题标题】：Issue regarding binding a javascript event with a innerHTML DOM element关于将 javascript 事件与 innerHTML DOM 元素绑定的问题
【发布时间】：2016-12-24 05:17:15
【问题描述】：

现在我面临一个关于如何将 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);
});

【问题讨论】：

您知道.innerHTML 会覆盖分配给它的所有内容，对吧？
是的，但这是覆盖问题吗？我不知道。如果没有，那么如何解决我的问题。
ig_id 是什么？它没有定义，加上 child_div 需要在创建后的某个时间附加到 DOM。
你能添加完整的javascript代码吗
@Abhradip 当您返回时，请确保您提供 minimal reproducible example 。这不应该是一个问题，因为你已经让它大部分工作并且不要忘记包括那个正在消失的事件，因为我现在没有看到一个。

标签： javascript jquery html css dom

【解决方案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>

【讨论】：

我使用了复选框，事实是该复选框也是由 javascript 创建的，然后绑定了事件。我认为这引起了问题。该复选框实际上不在 DOM 上。它是由一些 javascript 创建的。
ok.. 但您可以向它添加一个点击事件，它是在哪里生成的。就像我们在这个例子中在生成的 div 上附加一个 onclick 事件一样：childDiv.onclick="newFunction()"
我将编辑我的答案并将其展示给您。给我五个
立即查看。当您单击它时，我在生成的 div 上附加了一个单击事件。如果这解决了您的问题，请您接受并支持我的回答。
你写了一行作为 childDiv.onclick =alertMess;它工作正常。现在，如果我需要向 alertMess 函数发送一些参数，那么如何编写呢？它应该像 childDiv.onclick =alertMess(x,y) 还是其他任何东西

【解决方案2】：

在那里使用本机 javascript，您可以使用 innerHTML 或 cloneNode - 但它们只克隆 inline 侦听器，而不是使用 addEventListener 的侦听器 - 请参见下面的演示：

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

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

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

解决方案

如果您要使用 Jquery，那么您有一个解决方案 - 它有一个 clone() 方法 - clone(true) 也指示它复制事件处理程序！请看下面的演示：

$(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");
}

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

<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>

【讨论】：