Обработчик событий вызывает много предупреждений

Question

Я работаю над приложением PhoneGap, в котором я получаю доступ к контактам устройства. Затем я храню до 10 контактов в window.localStorage. Для этого, когда пользователь выбирает кнопку, я создаю элемент div, состоящий из трех элементов.

1. Изображение (значок контакта, который представляет мужской / женский контакт)
2. Имя контакта
3. Другое изображение (представляет знак «добавить», чтобы добавить его в window.localStorage)

Затем я связываю обработчик событий, который сначала проверит, существует ли контакт в localStorage, а затем приступит к добавлению контакта. Вот код

function checkDuplicate(somevalue)
{
    for(var i=0;i<10;i++) {
        if(window.localStorage.getItem(i)!=null) {
            if(window.localStorage.getItem(i)==somevalue) {
                navigator.notification.alert('Entry exists at Button:'+i);
                return false;
            }
        }
    }
    //chosenButton is a global variable
    window.localStorage.setItem(chosenButton,somevalue);
    document.getElementById('contactNumberField').textContent=somevalue;
}

//Problem is with the event listener attached to span2. Please read below

function addContact(item)
{
    var parentDiv = document.getElementById('thelist');
    var childDiv = document.createElement('li');
    var span1 = document.createElement('span');
    span1.style.float='left';
    span1.innerHTML = "<img src='keypad-contact.png'/>";
    var span2 = document.createElement('span');
    span2.style.float='right';
    span2.innerHTML="<img src='keypad-addcontact.png'/>";
    span2.addEventListener('click',function({checkDuplicate(item.number);},false);
    childDiv.textContent=item.name;
    childDiv.style.color='white';
    childDiv.appendChild(span1);
    childDiv.appendChild(span2);
    parentDiv.appendChild(childDiv);    
}

function onSuccess(contacts)
{
    var objArray = new Array();
    for(var i=0; i<contacts.length;i++) {
        var tempObj = new Object();
        tempObj['name']=contacts[i].displayName;
        tempObj['number']=contacts[i].phoneNumbers[0].value;
        objArray.push(tempObj);                 
    }
    objArray.sort(
    function(a,b){
        var nameA = a.name.toLowerCase(),nameB=b.name.toLowerCase();
        if(nameA < nameB) return -1;
        else if(nameA > nameB) return 1;
        return 0;
    }); 
    for(var i=0; i<objArray.length;i++) addContact(objArray[i]);
}

function onDeviceReady()
{
    var options = new ContactFindOptions();
    options.multiple=true;
    var field = ["displayName","phoneNumbers"];
    navigator.contacts.find(field, onSuccess, function(){alert('NA');}, options);
}

Задача

Когда я пытаюсь добавить контакт, который уже присутствует в window.localStorage, для моего первого прикосновения к span2 я получаю одно предупреждение. Если я попытаюсь добавить снова, коснувшись его во второй раз, я получу два предупреждения ... и это продолжается. Проблема в обработчике событий, связанном с span2. Однако я не знаю, как преодолеть эту ситуацию. Как я могу гарантировать, что независимо от того, сколько раз я нажимаю span2, я получаю предупреждение только один раз. Как удалить обработчик события сразу после его запуска?

Пожалуйста, помогите. Спасибо

Answer 1

Исправлено: проблема не в динамическом добавлении обработчиков событий.Я использую iScroll (cubiq) для моего проекта, и это вызвало проблемы.Сейчас я не получаю несколько предупреждений.Хитрость заключается в том, чтобы объявить глобальную переменную прокрутки только один раз.

var scroller = null;

, а затем в функции

if(!scroller) scroller = new iScroll('scrollableDiv');

Я надеюсь, что это может быть полезным советом для людей, которые используют iScroll иборется с несколькими предупреждениями, как я.