gpt4 book ai didi

javascript - 事件监听器触发错误的目标/函数在错误的时间执行

转载 作者:行者123 更新时间:2023-11-30 17:08:25 24 4
gpt4 key购买 nike

<分区>

我遇到了一个事件监听器的问题,它在错误的对象上触发。

要查看它,请单击“Min”下方有数字的一个 td

完整的js代码如下:

var minedit = document.getElementsByClassName('min-edit');
for (var m=0;m<minedit.length;m++){
minedit[m].addEventListener('click', edit);
}

function edit(){
this.removeEventListener('click', edit);
var avalue = this.innerHTML;

if (this.className.indexOf('input-open')>=0){


}

else {
this.className += 'input-open';
var content = '';
content += '<div class="input-group editable-input"><input type="text" id="minedit'+this.parentNode.childNodes[1].id+'" value="'+parseFloat(avalue).toFixed(2)+'" class="form-control"><span class="input-group-addon editable-input" id="savethis"><i class="ion-android-done" ></i></span><span class="input-group-addon editable-input"><i class="ion-android-close" id="close"></i></span></span></div>';
this.innerHTML = content;


var valuenow = document.getElementById('minedit'+this.parentNode.childNodes[1].id).value;
var id = document.getElementById('minedit'+this.parentNode.childNodes[1].id).id;

var save = document.getElementById('savethis');
save.addEventListener('click', savethis(valuenow, id));


}
function savethis(v,id) {

console.log(id.replace('minedit','')+'Button clicked: '+v);
}

}

这是一个 fiddle

发生了什么:

用这几行:

 var content = '';
content += '<div class="input-group editable-input">
<input type="text" id="minedit'+this.parentNode.childNodes[1].id+'" value="'+parseFloat(avalue).toFixed(2)+'" class="form-control">
<span class="input-group-addon editable-input" id="savethis"><i class="ion-android-done" ></i></span>
<span class="input-group-addon editable-input"><i class="ion-android-close" id="close"></i></span></span></div>';
this.innerHTML = content;

我正在创建一个输入字段和两个跨度,其中一个的 ID 为“savethis”。现在,我在 savethis 上添加了 eventlistener:

 var valuenow = document.getElementById('minedit'+this.parentNode.childNodes[1].id).value;
var id = document.getElementById('minedit'+this.parentNode.childNodes[1].id).id;

var save = document.getElementById('savethis');
save.addEventListener('click', savethis(valuenow, id));

但是函数 savethis 在 innerHTML 更改为输入字段的那一刻被调用。你可以在 fiddle 中看到这个单击其中一个“最小”TD 时。

有人可以帮我解决这个问题吗?为什么在单击一行而不是在跨度上单击时调用该函数?

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com