Как обрабатывать по клику динамически созданные элементы?

Question

[Денис Рыбин]

Здравствуйте, подскажите пожалуйста в чем ошибка не получается обработать событие клика по созданным элементам.
var audio;
var on = "Включить аудио";
$("#audio").text(on);
var list =[];
$("#audio").click(function(){
if($(this).text() == on){
//включаем плеер и запускаем аудио фай, сообщающий что плеер включен
audio = new Audio("/audio/audio-on.mp3");
audio.play();
$(this).text('Выключить аудио');
//получаем список аудиофайлов
$.getJSON("playlist", function(data){
$(".player").html(""); //очищаем список
$.each(data, function(key, val){
list = $(".player").append('' + val + '');
});
});
}else{ // выключаем плеер
$(".my-new-list").remove();
if(audio != null){
audio.pause();
}
audio = new Audio("/audio/audio-off.mp3"); //Проиграем звук что плеер отключен
audio.play();
$(this).text(on);
}
});

// эта функция не работает
list.click(function(){
audio.pause();
audio = new Audio("/audio/" + this.text());
audio.play();
});

Нужно чтоб по выбраному элементу проигрывался соответствующий аудиофайл. Когда прописываю элементы напрямую в html странице, то все нормально работает.
В чем ошибка?

Answer 1

[Денис Рыбин]

Все сделал, вот работающий код, вторую функцию удалил, обработку сделал в первой.
var audio;
var on = "Включить аудио";
$("#audio").text(on);
$("#audio").click(function(){
if($(this).text() == on){
//включаем плеер
audio = new Audio("/audio/audio-on.mp3");
audio.play();
$(this).text('Выключить аудио');
$.getJSON("playlist", function(data){
$(".player").html(""); //очищаем список
$.each(data, function(key, val){
$(".player").append("" + val + "");
});
$(".my-new-list").on("click", function(){
audio.pause();
audio = new Audio("/audio/" + $(this).text());
audio.play();
});

});

}else{
$(".my-new-list").remove();
if(audio != null){
audio.pause();
}
audio = new Audio("/audio/audio-off.mp3");
audio.play();
$(this).text(on);
}
});

Answer 2

[iBird Rose]

замени все click с
list.click(function(){
на
$(document).on('click', list, function(){

Comments

[Денис Рыбин]

ошибка в консоли UncaughtTypeError: this.text is not a function
как тогда получить значение элемента?

[iBird Rose]

Денис Рыбин: бери правильно this. где у тебя эта переменная? а если тебе нужна не переменная, то нужно писать $(this)

[Денис Рыбин]

iBird Rose: я в javascript, плохо разбираюсь, сейчас запомню.
Заработало, но не так как нужно- выбирается текст из div'ов, которые на главной странице, запрос на сервер уходит site.ru/player/главнаяосайтеконтакты
Что-то в функции выше нахимичил не так

[iBird Rose]

Денис Рыбин: вопрос в посте звучал как "Как обрабатывать по клику динамически созданные элементы?". я тебе показал как в общем

[Денис Рыбин]

Уточню вопрос. Как обрабатывать "отдельно, выбранный элемент"не выбираются нужные файлы, запрос уходит site.ru/audio/index.mp3main.mp301.mp3
Надо чтобы отдельно на каждый файл.

Answer 3

[justdealman]

Используйте jQuery .delegate()

$('html').delegate(list, 'click', function() {
audio.pause();
audio = new Audio("/audio/" + this.text());
audio.play();
}

Comments

[Денис Рыбин]

ошибка UncaughtTypeError: this.text is not a function
at HTMLHtmlElement. (scripts.js:38)

[justdealman]

Откуда .text() то требуется взять?

[GreatRash]

Метод .delegate() осуждается, начиная с версии 3.0

[justdealman]

GreatRash вангую, что автор использует 1x

[GreatRash]

justdealman: Там тоже есть .on()