не удается добавить прослушиватели событий click/mouseup/mousedown в ‹a href›

Я пытаюсь создать кнопку в теге <a href="#" ...>, используя HTML+CSS+Javascript+jQuery. Кнопка отображается правильно. Однако, когда я нажимаю на нее, ничего не происходит, кроме поведения по умолчанию (т.е. перехода к "#"). Любые предложения о том, что я делаю неправильно? Вот мой код:

    //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 выглядит следующим образом

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

Я работаю с Хромом.

Какие-либо предложения? Спасибо.


javascript click jquery mouseup mousedown
person dmasspla    schedule 07.11.2011    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Может ли быть так, что браузер еще не завершил добавление вашего HTML в DOM, прежде чем вы попытаетесь прикрепить к нему событие?

то есть между этими двумя строками?

container.innerHTML = temp_innerHTML;

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

В этом случае, возможно, вы захотите прикрепить события с помощью .live(), http://api.jquery.com/live/

person CambridgeMike    schedule 07.11.2011
comment
Спасибо!! Я использовал .on() api.jquery.com/on, который кажется эквивалентным .live() для jquery 1.7, и это сработало. - person dmasspla; 08.11.2011
comment
Да, это довольно раздражающая проблема - я сталкивался с ней несколько раз. По-видимому, HTML5 указывает событие, когда DOM изменяется, а затем снова полностью загружается. Что может быть полезно для таких вещей, как $(#leftButton).ready(...) - person CambridgeMike; 08.11.2011

arrow_upward
2
arrow_downward 

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

должно быть e.preventDefault();

person John    schedule 07.11.2011

arrow_upward
0
arrow_downward

Лично я предпочитаю добавлять обработчики событий следующим образом:

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
}
person Coronus    schedule 07.11.2011
comment
Спасибо. Я обязательно рассмотрю этот стиль в следующий раз. - person dmasspla; 08.11.2011