Jquery не работает с динамически созданной таблицей

Question

У меня есть простая веб-страница, которая использует плагин шаблона jquery для динамической загрузки данных в таблицу с помощью вызова json при загрузке страницы. В этой таблице я хочу поместить кнопки / div или все, что можно щелкнуть, чтобы затем добавить функцию, которая откроет новую страницу для редактирования содержимого этого столбца.

Проблема в том, что ни одна из вещей jquery не работает в кнопках, которые я положил в таблицу. Если я помещаю ту же самую кнопку из таблицы (то есть не генерирую ее динамически), то она работает нормально, но тогда я не получаю одну кнопку на столбец.

Вот что у меня на странице загрузки

$(document).ready(function() {
    $.ajax({
        type: 'POST',
        dataType: "json",
        url: "http://server:8000/categories/list",
        success: function (data) {
                LoadCategories(data['CategoryList']);
        }
    });

    $(".editButton").button(); // using jquery-ui
    $(".editButton").click( function() {
        alert("Button has been clicked");
    });
});

и мой шаблон выглядит как

   <script id="catTemplate" type="text/x-jquery-tmpl">  
        <tr id="$CategoryId">  
            <td> <button id="edit-${CategoryId}" class="editButton"> Edit</button> </td>
            <td> ${CategoryName}</td>
            <td> ${OtherValue} </td>
        </tr>  
    </script>  

Таблица загружается правильно и все, просто jquery не применяется к динамически генерируемым материалам. Почему это так и как я могу заставить кнопки делать то, что я хочу?

Answer 1

Ваш jquery для добавления обработчика кликов, скорее всего, будет запущен до того, как содержимое окажется на странице.Помните, что вызов Ajax является асинхронным, поэтому ваш вызов ajax - это просто НАЧАЛО вызова ajax.Он не завершится, пока не будет выполнена функция успеха.

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

Вы можететакже используйте:

$(".editButton").live('click', function() {
    alert("Button has been clicked");
});

, так как живой обработчик будет перехватывать все клики на уровне документа, а затем проверять, добавили ли вы для них обработчики кликов (поэтому он будет работать, даже если вы его указали ранее).элемент добавляется на страницу), но это несколько менее эффективно, чем работа непосредственно с объектами ПОСЛЕ того, как они были добавлены на страницу в вашем обработчике успеха.

Answer 2

Вы звоните:

$(".editButton").button(); // using jquery-ui
$(".editButton").click( function() {
    alert("Button has been clicked");
});

И то, и другое до того, как Ajax преуспел. Поэтому, когда вы пытаетесь сделать его кнопкой и связать событие щелчка, элемент с этим классом еще не существует. Используйте это вместо:

$(document).ready(function() {
    $.ajax({
        type: 'POST',
        dataType: "json",
        url: "http://server:8000/categories/list",
        success: function (data) {
                LoadCategories(data['CategoryList']);
                $(".editButton").button(); // using jquery-ui
                $(".editButton").click( function() {
                    alert("Button has been clicked");
                });
        }
    });
});

Answer 3

используйте live() для динамического прикрепления события

$('.editButton').live('click', function() {
   alert("Button has been clicked");
});

Answer 4

Поместите эти строки в успешный обратный вызов

$(".editButton").button(); // using jquery-ui
$(".editButton").click( function() {
    alert("Button has been clicked");
});