Question

I am working on a Phonegap app, in which I access device’s contacts. I then store upto 10 contacts in window.localStorage. To do so, when the user select a button, I create a div which has three elements.

1. An image (contact icon that represents male/female contact)
2. The name of the contact
3. Another image (represents ‘add’ sign to add it to window.localStorage)

I then associate an event handler, which will first check if the contact already exists in the localStorage and then proceed to add the contact. Here is the code

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

Problem

When I try to add a contact which is already present in window.localStorage, for my first touch on span2, I get one alert. If I try to add again by touching it for the second time, I get two alerts.. and this goes on. The trouble is with the event handler associated with span2. However, I don’t know how to over come this situation. How can I ensure that irrespective of how many times I press span2, I get alert only once. How to remove the event handler as soon as it is fired?

Please help.

Answer 1

Fixed:
The issue was not with adding event handlers dynamically. I happen to use iScroll (cubiq) for my project and that caused the trouble. Now I am not receiving multiple alerts. The trick is to declare the globlal scroller variable only once.

var scroller = null;

and then in the function

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

I hope this could be a useful tip for people who are using iScroll and struggling with multiple alerts like me.