ne peut pas ajouter un clic/mouseup/écouteurs d'événements mousedown à <a href>

Question

I am trying to create a button on an <a href="#" ...> tag using HTML+CSS+Javascript+jQuery. The button displays properly. However, when I click on it nothing happens except for the default behavior (i.e., navigating to "#") . Any suggestions of what I am doing wrong? Here is my code:

//container is a div created with 
    //borderDiv = document.createElement('div') and 
    //document.body.appendChild(borderDiv); 

function addMenuNavigation(container) { 
    var temp_innerHTML = '' + 
    '<div id="titleBar" class="titleBar">' + 

    '<div id="menuTitle" class="menuTitle"><img id="titleImage" style="height: 70px; position: absolute; top: 2px; left:120px"></img></div>' + 

    '<a href="#" class="leftButton" id="leftButton">' + 
    ' <div style="position: relative; top: 6px;"><img src="' + getURL('img/menu/iPhoneStyle/chevronLeft.png') + '"></img></div>' + 
    '</a>' + 

    '</div>' + //titleBar 
    ''; 

    container.innerHTML = temp_innerHTML; 

    var $leftButton = $('#leftButton'); 
    console.dir($leftButton); //Indeed it does display the #leftButton element 


    //FIXME BUG 'MenuNavigation' below functions do not get registered ... 

    $('#leftButton').mousedown(function(e) { 
     $('#leftButton').addClass("pressed"); 
     console.log('leftButton down ' + this.id); 
    }); 
    $('#leftButton').mouseup(function(e) { 
     console.log('leftButton up ' + this.id); 
     $(this).removeClass("pressed"); 
    }); 
    $('#leftButton').click(function(e){ 
     console.log('leftButton clicked ' + this.id); 
     click_e.preventDefault(); 
    }); 

} 

.css is as follows

.titleBar { 
    ... 
    display: block; 
    height: 63px; 
    opacity: 0.8; 
    padding: 6px 0; 
    ...   
    background-image: -webkit-gradient(linear, left top, left bottom, 
             from(#bbb), to(#444));                  


    z-index: 35;      
} 


.leftButton:not(ac_hidden), .leftButton:not(pressed) { 
    left: 6px; 
    ... 
    -webkit-border-image: url(../img/menu/iPhoneStyle/back_button.png) 0 8 0 8; 
} 


.leftButton.pressed{ 
    -webkit-border-image: url(../img/menu/iPhoneStyle/back_button_clicked.png) 0 8 0 8; 
} 

I am working with Chrome.

Any suggestions? Thank you.

Answer 1

Could it be that the browser hasn't finished adding your HTML to the DOM yet before you try to attach an event to it?

i.e, between these two lines?

container.innerHTML = temp_innerHTML; 

var $leftButton = $('#leftButton'); 

In which case, perhaps you want to attach the events with .live(), http://api.jquery.com/live/

Answer 2

$('#leftButton').click(function(e){ 
     console.log('leftButton clicked ' + this.id); 
     click_e.preventDefault(); 
    }); 

should be e.preventDefault();

Answer 3

Personnellement, je préfère ajouter mes gestionnaires d'événements de cette façon:

function addMenuNavigation(container) { 
    var container = $(container).empty(); 
    var titleBar = $('<div id="titleBar/>'); 
    var leftButton = $('<a href="#">Image here</a>').mousedown(leftButtonMousedown).mouseup(leftButtonMouseup).click(leftButtonClick).appendTo(titleBar); 
    titleBar.appendTo(container); 
} 

function leftButtonMouseDown(e) { //mouse down handler 
} 
function leftButtonMouseUp(e) { //mouse up handler 
} 
function leftButtonClick(e) { 
    e.preventDefault(); 
    // handle the click here 
}