Как связать событие нажатия на недавно добавленный тег <a>в jquery

Question

У меня есть 6 ссылок на страницу в mp3.

Плагин, который я установил, заменяет эти ссылки SWF-файлом и воспроизводит этот mp3-файл.

Проблема, с которой у меня была , заключалась в том, что можно было активировать все 6 ссылок и одновременно воспроизводить все аудио. Я решил эту проблему (хотя я чувствую себя неуклюже новичком), перехватив тег перед его заменой тегом embed, а затем вернув его обратно при нажатии на другой.

Однако теперь это моя проблема : тег , который я помещаю обратно, теряет событие onClick (я думаю, это то, что происходит), и поэтому, если щелкнуть второй раз, он не может переключиться как в первый раз.

$(".storyplayer a").bind("click", function() {

        // replace the <a> tag from the previous media player installation
        if (previousplayerlocation != null) {$("#" + previousplayerlocation + " .storyplayer").html(graboldcode);}      

        // now remember this installation's <a> tag before it's replaced
        graboldcode = $(this).parent().html();
        // remember where I grabbed this <a> tag from
        previousplayerlocation = $(this).parents("div.storylisting").attr("id");

        // replaces the <a> tag with the media player.
        $(this).media({width: 190,height: 30});
        return false;
    });

Я спрашиваю, есть ли способ переназначить событие click для оператора if? Спасибо!

Answer 1

Использовать делегирование события - это означает привязку щелчка к некоторому контейнеру и возможность обработки события. Затем вы можете запросить файл event.target, чтобы узнать, был ли щелкнут якорь, а затем вам нужно поведение. Это лучше по ряду причин.

1. Меньше событий, связанных с элементами (производительность)
2. Нет необходимости перепривязывать события после добавления / удаления содержимого, поскольку контейнер остается постоянным и всегда будет там для обработки всплывающего события щелчка.

Код будет что-то вроде

$('#someContainer').click( function(ev){

    var $el=$(ev.target);
    if ( $el.is('a') ){
       //do your stuff
    }

});

Смотрите этот пост для более подробного чтения

Answer 2

теряет обработчик onclick, потому что он удаляется. При повторном добавлении HTML-кода этот обработчик не возвращается.

Не переставляя код, вы можете создать функцию, которая будет служить вашим обработчиком кликов.

function playerClicked() {    
        // replace the <a> tag from the previous media player installation
        if (previousplayerlocation != null) {
            $("#" + previousplayerlocation + " .storyplayer")
                .html(graboldcode)
                .click(playerClicked);  // Re-add the onclick handler
        }

        // now remember this installation's <a> tag before it's replaced
        graboldcode = $(this).parent().html();
        // remember where I grabbed this <a> tag from
        previousplayerlocation = $(this).parents("div.storylisting").attr("id");

        // replaces the <a> tag with the media player.
        $(this).media({width: 190,height: 30});
        return false;
}

$(".storyplayer a").bind("click", playerClicked);

Answer 3

Взгляните на плагин livequery . С помощью этого плагина вы можете связывать прослушиватели событий даже для элементов, которые недоступны в DOM ready.

$('a').livequery('click', function(){

    });

Плагин контролирует DOM и связывает слушателей. Вы также можете самостоятельно выполнить оценку:

$.livequery.run()

Некоторые другие мощные функции:

Вы можете истечь слушатели:

$('a').livequery.expire('click')

Вы можете зарегистрироваться на слушателей матча:

$('a').livequery(
function(){ onmatchHandler},
function(){ onmismatchHandler }
);