Вызов функции Javascript после загрузки страницы AJAX

Question

Я не программист, поэтому я прошу прощения, если мой вопрос не имеет большого смысла.

Но в основном у меня есть одна страница index.php, которая имеет набор фильтров (по проекту, год, month) и после нажатия кнопки submit отправляет переменные в filterData.php для использования в некоторых операторах SQL.

Результаты в виде таблицы миниатюр изображений возвращаются в div в index.php.То, что я хочу сделать, это сделать так, чтобы, когда пользователь нажимает на изображение, цвет рамки изменялся, чтобы выделить текущий объект.

<script type="text/javascript">
$(document).ready(function () {
    $('.thumbnail_small').click(function(){
        $(this)
            .css('border-color','#000')
            .siblings()
            .css('border-color','#ccc');
    });
});
</script>

^ Это сценарий, который у меня есть сейчас, и он работает, еслиТаблица миниатюр жестко закодирована в index.php.Как только я загрузил таблицу через filterData.php, она больше не работает.

В чем причина этого и как я могу обойти это?

Answer 1

После загрузки таблицы через filterData.php она больше не работает.

Используйте live или лучше on в зависимости от используемой вами версии jQuery:

$('#mainContainer').on('click', '.thumbnail_small', function(){
    $(this)
        .css('border-color','#000')
        .siblings()
        .css('border-color','#ccc');
});

или

$('.thumbnail_small').live('click', function(){
    $(this)
        .css('border-color','#000')
        .siblings()
        .css('border-color','#ccc');
});

Для элементов, которые добавляются позже или динамически, вы должны использовать live или on.