2015-04-16 6 views
3

Мне нужно добавить обработчик события click для кнопки внутри div, который находится внутри таблицы. Как мне добраться до него с помощью jQuery. Вот мой ДИВ:Выбрать кнопку из div внутри динамической таблицы

<div id = 'fromServer'></div> 

Вот как я заполнит его:

function onSuccess(response) { 
    p = response; //p is global for debugging! 
    resultsArray = response.results; 
    str = '<table id=\'mytable\'>'; 
    str += '<tr><td class =\'title\'>Album</td>'; 
    str += '<td class =\'title\'>Track Name</td>'; 
    str += '<td class =\'title\'> <button id =\'save\'>Save</button></td></tr>'; 

    for (i = 0; i < resultsArray.length; i++) { 
     str += '<tr><td>' + '<img src=\'' + resultsArray[i].artworkUrl100 +'\' height=\'100\' width=\'100\'' + '</td>'; 
     str += '<td class=\'albumName\'>' + resultsArray[i].trackName.substring(0,30) + '</td>'; 
     str += '<td> <input type=\'checkbox\' class =\'checkbox\' name=\'' + i + '\'></td></tr>'; 
    } 
    str += '</table>'; 
    $('#fromServer').html(str); 
} 

Вот как это выглядит:

enter image description here

Теперь я хочу, чтобы добавить обработчик событий нажмите для кнопки сохранения, как мне это сделать? Вот моя попытка, но она не работает.

$('#fromServer').find("#mytable").find("#save").bind('click', saveButtonEventHandler); 

//Event Handlers 
function saveButtonEventHandler(evt) { 
    alert("Button pressed!"); 
} 
+2

FYI Знаете ли вы, что вы также можете использовать jQuery для построения динамического html? Например: var myTable = $ ('

'); 'Все атрибуты, свойства могут быть установлены одинаково. Это более читаемый синтаксис IMHO. – ne1410s

+0

Спасибо за обмен! – Ammar

ответ

1

В связи с тем, что таблица и кнопки сохранения в настоящее время динамически добавляется в DOM, вы бы лучше использовать делегированный обработчик событий для этого:

$('#fromServer').on('click', '#save', saveButtonEventHandler); 
+0

Хорошо знать о делегированных обработчиках событий в jQuery, поэтому вам не нужно беспокоиться о том, где размещать обработчики событий для динамически добавленных элементов DOM. –

+1

Я выбрал этот ответ, так как он был первым. Другой ответ, +1. – Ammar

+0

@Ammar какая логика. здорово. – nirmal

5

Похоже контентом загружен с помощью ajax. вы можете использовать ниже функцию.

$(document).on("click", '#save', function(event) { 
    alert("button pressed"); 
}); 
Смежные вопросы