2013-08-29 2 views
2

Я получаю проблему с вызовом немедленной функции с помощью addEventListener, которая вызывает его дважды. пытался переходить от барботажа к захвату, но не работал. вот мой кодфункция вызова addEventListener дважды с непосредственным шаблоном функции

некоторое описание: Я пытаюсь добавить текстовое поле, в которое он нажал.

var mod = (function(){ 

    var sEventType = 'click', 
     labelObj = document.getElementsByTagName('label'); 

      return { 

        createTextBox : function(targetId,inputVal){ 

         alert('hi'); 
         var elemInput = document.createElement('input'); 
        }, 

        addEvents : function(){ 

         for (var i = 0; i < labelObj.length; i++) { 
          if (window.addEventListener) //Firefox, Chrome, Safari, IE 10 
          labelObj[i].addEventListener(sEventType,function(){ mod.createTextBox(this,this.innerHTML);}, false); 
          else if (window.attachEvent) //IE < 9 
          labelObj[i].attachEvent(sEventType, function(){ mod.createTextBox(this,this.innerHTML);}); 
         } 
        } 
      } 
    }()); 

    //Intialise Event 
    mod.addEvents(); 

Отметьте addEventListener, который вызывает createTextBox, дважды вызывает предупреждение внутри всплывающего окна.

Вот HTML часть

<body> 

<div id='tableMain'> 

    <div id='exlTopHd'> 
    <div id='loginData'> 
     <div id='yourName'><label id='mNam'>type your name here</label></div> 
     <div id='yourEmail'><label>your email address</label></div> 
    </div> 
    <div id='exlCtr'> 
     <div id='exlTitle'><label>add title<lable></div> 
     <div id='addRow'>+row</div> 
     <div id='addColomn'>+colomn</div> 
     <div id='saveExl'>saving...</div> 
    </div> 
    </div> 

    <div id='exlTb'></div> 

</div> 

+1

Не связаны, но наследие IE фрагмент вам нужно ' 'на' + sEventType ...'. – Teemu

+0

Каково значение 'labelObj.length' – dreamcoder

+0

labelObj.length значение равно 3. – mayank

ответ

2

Возможно, вы вложенными в input в label так:

<label>Check 1: <input type="checkbox" /></label> 

Нажатие на label вызывает также щелчок на input, когда используя вложенные элементы. Чтобы избежать этого, вы можете использовать for атрибут:

<label for="check1">Check 1: </label><input id="check1" type="checkbox" /> 

A live demo at jsFiddle.


EDIT

Похоже, вы редактировали свой вопрос в то же время я написал свой ответ. Во всяком случае, то, что написано выше, стоит, даже если бы input s было добавлено динамически. Пожалуйста, проверьте this fiddle, и дайте мне знать, если это то, что вам нужно. Фрагмент создает динамически input с и вставляет их после label.

Вот модифицированный фрагмент кода:

var mod = (function() { 
    var sEventType = 'click', 
     labelObj = document.getElementsByTagName('label'); 
    return { 
     createTextBox: function (e) { 
      var target = e.target || e.srcElement, 
       parent = target.parentElement, 
       elemInput = document.createElement('input'); 
       inpId = parent.id + 'Inp'; 
      elemInput.value = target.innerHTML; 
      elemInput.id = inpId; 
      target.setAttribute('for', inpId); 
      parent.insertBefore(elemInput, target.nextSibling); 
     }, 
     addEvents: function() { 
      for (var i = 0; i < labelObj.length; i++) { 
       if (window.addEventListener) //Firefox, Chrome, Safari, IE 10 
       labelObj[i].addEventListener(sEventType, function (e) { 
        mod.createTextBox(e); 
       }, false); 
       else if (window.attachEvent) //IE < 9 
       labelObj[i].attachEvent('on' + sEventType, function (e) { 
        mod.createTextBox(e); 
       }); 
      } 
     } 
    } 
}()); 
Смежные вопросы