I have two buttons at the same location (one over the other, absolute position). I am using Jquery mobile 1.4 and Phonegap 3.3.

button#1 is initially `visible`

button#2 is initially `hidden`

When I tap on button#1, it should hide button#1 and display button#2.

But the weird thing is that, when tapping on button#1, it also triggers on button#2, like if it were already displayed. So with the code below, tapping on button#1, hides button#1, displays button#2, hides buttons#2 and displays button#1...back to where we started !

Is there something I am doing wrong ?

HTML:

```
      <a id="miniWeightLevel" class="ui-btn ui-btn-b ui-corner-all">My Factor</a>
            <div id="minifyCross">
                <div id="minifybutton" class="ui-btn btn-small-round ui-icon-delete ui-btn-b ui-btn-icon-notext ui-btn-inline"></div>
            </div>   

```

JS:

```
$(document).on('pagebeforeshow', '#welcome-page', function(event, docdata){     
    //initial state : 
    $('#miniWeightLevel').hide();
    $('#minifyCross').show();

    //bindings :
    $('#miniWeightLevel').unbind('vclick').bind('vclick', function (e) {
        e.stopPropagation();
        $('#miniWeightLevel').hide();
        $('#minifyCross').show();
    });
    $('#minifyCross').unbind('vclick').bind('vclick', function (e) {
        e.stopPropagation();
        $('#miniWeightLevel').show();
        $('#minifyCross').hide();
    });
});

```