JS-скрипты не работают для div, загруженных с помощью jQuery .load () - PullRequest
0 голосов
/ 14 декабря 2018

Так что у меня есть div с некоторыми php внутри.Он выполняет некоторые записи из базы данных sql.

<div id="records">
  <?php
  list_query(select_records()); // some php returning divs
  ?>
</div>

Я использую складной materialize для просмотра дополнительной информации об этой записи.Когда вы нажимаете на эту одну строку (запись), она расширяется, как в примерах материализации.

И у меня есть HTML, выделенный выше, где вы можете выбрать, с какой даты вы хотите вернуть эти записи.

<form class="ajax" action="action/timeSort.php" method="post">
  <select name="timeSort" class="timeSortSelect">
    <option value="1">Last 24 hours</option>
    <option value="7">Last 7 days </option>
    <option value="30">Last 30 days</option>
    <option value="365">Last 365 days</option>
    <option value="all" selected>Everything</option>
  </select>
</form>

Чем вызван jquery ajax, когда вы выбираете любой вариант.Он отправит сообщение в файл php и создаст php $_SESSION с отметкой времени, если ajax успешен, эта функция называется:

$('#records').load(document.URL +  ' #records');

И в этой функции php list_query() она читает, что $_SESSION и отсортируйте его с того времени.

Проблема здесь:
Но проблема в том, что скрипты (события щелчка, события, просто все что угодно) для этих вновь возвращаемых записейзагруженный с jQuery .load() функция не работает.on('event') не работает, click() не работает, пользовательские инициализации материализации не работают.Даже не delegate события.

Я пытался:
1) Поместить новый тег script src в конце этого #records div, чтобы он снова загрузил эти скрипты- не работает

2) Выполнение этих функций после запуска .load() - не работает

// try #2 example
$('#records').load(document.URL +  ' #records');
$('.collapsible').collapsible(); // doesn't work
$('#records .clickingElement').on('click', function() {/*blah blah*/}) // doesn't work

Возможные решения, которые я не хочу делать (пока):
1) Получите каким-либо образом информацию об этих записях из этого файла действия php и добавьте его через jQuery, чем сработают события delegate или моя попытка №1.Но это нехорошо, но я постараюсь.

2) Обновление всего сайта.Пффф, я лучше этого, и никто не любит принудительное обновление.

Основной вопрос: Есть ли для него решение jQuery, например, какие-то специальные мероприятия?Или у вас есть идея, как добиться такой же сортировки, но с лучшим способом?

Если вы чего-то не понимаете или хотите больше кода, не стесняйтесь комментировать.Спасибо за вашу помощь.

Редактировать: Пример изображения того, как он выглядит выполненным и работающим (при нажатии на него он увеличивается)

image example

1 Ответ

0 голосов
/ 14 декабря 2018

Вам нужно установить функцию нажатия:

$('#records .clickingElement').on('click', function() {/*blah blah*/}) // doesn't work

На это:

$(document).on('click', '#records .clickingElement', function() {
    /*blah blah*/
});

Это гарантирует, что триггер события пройдет через весь дом, чтобы увидеть, если #Записи или .clickingElement существуют.Вместо этого только привязка к тем элементам под нагрузкой.Если это имеет какой-то смысл.

Это хороший ответ для вас: Событие Click не работает с динамически генерируемыми элементами

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...