现在我面临着关于如何将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);
});
答案 0 :(得分: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>
答案 1 :(得分:0)
使用原生javascript,您可以使用innerHTML
或cloneNode
- 但他们只会克隆内联听众而非使用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");
}
&#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)指示它也复制事件处理程序!请参阅下面的演示:
$(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;