事件侦听器触发错误的目标/函数在错误的时间执行 [英] Event Listener fires on wrong target / function executes at the wrong time

问题描述

要查看它，请点击一个td，其中的一个数字在' Min'

以下是完整的js代码：

var minedit = document.getElementsByClassName（'min-edit'）; for（var m = 0; m 小提琴

发生了什么：

用这行代码：

  var content =''; 
 content + ='< div class =input-group editable-input> 
< input type =textid =minedit'+ this.parentNode.childNodes [1] .id +'value ='+ parseFloat（avalue）.toFixed（2）+'class =形式控制> 
< span class =input-group-addon editable-inputid =savethis>< i class =ion-android-done>< / i>< / span> 
< span class =input-group-addon editable-input>< i class =ion-android-closeid =close>< / i>< / span> < /跨度>< / DIV>'; 
 this.innerHTML = content; 
  

我创建了一个输入字段和两个跨度，其中一个带有idsavethis。现在我在savethis上添加eventlistener：

  var valuenow = document.getElementById（'minedit'+ this.parentNode.childNodes [1 ] .ID）。价值; 
 var id = document.getElementById（'minedit'+ this.parentNode.childNodes [1] .id）.id; 
 
 var save = document.getElementById（'savethis'）; 
 save.addEventListener（'click'，savethis（valuenow，id））; 
  

但是，当innerHTML更改为输入字段时，将调用savethis函数。您可以在小提琴上点击最低TD中的其中一个来查看。

有人可以帮我解决这个问题吗？为什么函数调用点击一行而不是点击span？

解决方案

在addEventListener中调用savethis函数而不是传递它

更改

  save.addEventListener （'click'，savethis（valuenow，id））; 
  

至

  save.addEventListener（'click'，savethis）; 
  

并找到另一种在savethis函数中使用valueNow和id的方法。

这解释了如何传递参数： https： //developer.mozilla.org/en/docs/Web/API/EventTarget.addEventListener

I'm having a problem with an event listener which is firing on the wrong object.

To see it, please click on one td with a number below 'Min'

Here's the full js code:

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

Here's a fiddle

What is happening:

With this lines:

 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;

I'm creating an input field and two spans, one of them with the id "savethis". Now I add the eventlistener on savethis:

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

But the function savethis is called in the moment the innerHTML changes to the input field. You can see this in the fiddle when clicking on one of the 'Min' TDs.

Can someone help me with this? Why is the function called on click on a row and not on click on the span?

解决方案

In the addEventListener you are calling the savethis function instead of passing it in

Change

save.addEventListener('click', savethis(valuenow, id));

to

save.addEventListener('click', savethis);

And find another method to use valueNow and id in the savethis function.

This explains how to pass parameters: https://developer.mozilla.org/en/docs/Web/API/EventTarget.addEventListener

这篇关于事件侦听器触发错误的目标/函数在错误的时间执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！