Селектор диалога jQuery не отвечает на имя класса элементов, загруженных с помощью Ajax

Обновление: проблема решена:

Поскольку "проблемные" элементы создавались после момента загрузки страницы, делегирование события убедилось, что все они связаны с событием jQuery.

Исходное сообщение:

Я получил этот кусок кода:

while ($row=mysqli_fetch_array($res)){
    if($cont>3){
       $cont=1;
       $txt=$txt.'</tr><tr>';
    }
    $txt=$txt.'<td>'; 
    $txt=$txt.'<figure><img src="'.$row['picture'].'"/></figure>';
    $txt=$txt.'<figcaption>'.$row['pictureDesc'].'</figcaption>'; 
    $txt=$txt.'<div class="dialogInfoOpener" style="border:solid red 1px;">Details</div>'; 
    $txt=$txt.'</td>';    
    $cont++; 
}   
$txt=$txt.'</tr>';
echo $txt;

Он является частью файла PHP, который работает вместе с файлом JS (Ajax) для того, чтобы "построить" таблицу по строкам из 3 ячеек путем объединения строк. Для каждой ячейки некоторые данные загружаются из базы данных. Каждая клетка размещает div с заданным классом (dialogInfoOpener) и определенный встроенный стиль. div На элемент нужно нажать, чтобы открыть диалоговое окно jquery - здесь начинается проблема.

Код для моего диалогового окна:

HTML

<div id="dialogInfo" title="Product description">Info to be put in here.</div>

JQuery

$("#dialogInfo").dialog({ 
    autoOpen: false,
    buttons:[{
        text: "Close", click : 
        function(){
            $(this).dialog("close");
        }
    }]
});


$(".dialogInfoOpener").click(function(event){</s>
    $("#dialogInfo").dialog("open");</s>
});</s>

Код прекрасно работает для любого элемента с классом dialogInfoOpener который находится на странице, за исключением любого div элементы, которые принадлежат только что построенной таблице. При щелчке по этим элементам div ничего не происходит (атрибуты класса и стиля установлены правильно для каждой ячейки). Похоже, что jQuery не отвечает на имена классов, переданные в div. Зачем?

Надеюсь понятно.

Буду признателен за любые полезные предложения.

Источник

3 ответа

Решение

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

$(document).on("click", ".dialogInfoOpener", function(event){
    $(".dialogInfo").dialog("open");
});

Там обычно лучший селектор для использования, чем document - найти последовательный родительский элемент .dialogInfoOpener элементы и использовать это вместо.

Кроме того, я думаю, что у вас может быть опечатка - ваш HTML упоминает элементы с #dialogInfo, но внутри вашей функции клика вы используете .dialogInfo? Помните, что ID должны быть уникальными, если у вас их несколько, просто используйте класс.

Источник

Повторите код, который связывает событие click после того, как Ajax-вызов завершен. попробуйте unbind/bind, чтобы избежать повторяющихся событий.

Источник

Вы смешали идентификаторы и классы.

$("#dialogInfo").dialog({ использует идентификатор, но $(".dialogInfo").dialog("open"); использует класс. Если вы сделаете это то же самое, вы это исправите.

Источник
Другие вопросы по тегам