Работающий JQuery Скрипт не работает после ajax пост-ответа

Question

Я бы очень признателен за любую помощь!

У меня есть рабочий jquery скрипт. При нажатии на элемент div он обновляет класс css до активного и выполняет рабочий ответ ajax.

У меня также есть функция фильтра, которая тоже работает. Когда флажок установлен, он вызывает новый список элементов div из mysql со всеми теми же свойствами класса. Однако при нажатии любого из этих новых элементов div ответ ajax не работает. Если бы кто-нибудь мог помочь, я был бы невероятно признателен!

HTML:

        <div id="result" class="results">
        <div class="w-embed"><img src="images/loader.gif" id="loader" width="" "200px"="" style="display:none;">
          <?php
    $sql="SELECT * FROM `posts`";
    $result=$con->query($sql);
    while($row=$result->fetch_assoc()){
      ?>
            <div class="c-card" data-id="<?=$row['id'];?>">
              <h1 class="s-h2">
                <?=$row['title'];?>
              </h1>
              <!-- <div class="s-para m-light m-small"><?=$row['description'];?></div> -->
              <div class="c-stats">
                <div class="s-stat">Pay:
                  <?=$row['pay'];?>
                </div>
                <div class="s-stat">Deadline:
                  <?=$row['deadline'];?>
                </div>
                <div class="s-stat">Location:
                  <?=$row['location'];?>
                </div>
                <div class="s-stat">Cat:
                  <?=$row['category'];?>
                </div>
              </div>
              <p class="s-para">
                <?=$row['description'];?>
              </p>
              <a href="<?=$row['lnk'];?>" class="l-para">Find Out More</a>
            </div>
            <?php }?>
        </div>
      </div>

Javascript:

 <script>
$('.c-card').on('click', function(event){
 event.preventDefault();
    $('.c-card').removeClass('active'); //Removes class to all
   $(this).toggleClass('active'); //Applies class

    var action = 'data';
    var dataId = $(this).data("id");

    $.ajax({
        type:"POST",
        url:"ajax/selected.php",
        data:{action:action,id:dataId},
        success: function(response){
          $("#jobber").html(response);
          $("#changeme").text("altered");
          }
        });
      });
</script>

Это ответ от фильтров :

'<div class="c-card" data-id="'.$row['id'].'">
                  <h1 class="s-h2">'.$row['title'].'</h1>
                  <div class="c-stats">
                  <div class="s-stat">Pay:'.$row['pay'].'</div>
                    <div class="s-stat">Deadline:'.$row['deadline'].'</div>
                    <div class="s-stat">Location: '.$row['location'].';</div>
                    <div class="s-stat">Cat: '.$row['category'].'</div>
                  </div>
                  <p class="s-para">'.$row['description'].'</p>
                  <a href="'.$row['lnk'].'" class="l-para">Find Out More</a>
                </div>';

Итак, мой вопрос: как заставить новые div-ы (вызываемые из фильтра) продолжать запускаться и изменить класс + выполнить запрос ajax.

Спасибо так много заранее!

Answer 1

Мне показалось, что ваша настоящая проблема в том, что ответ ajax становится нулевым.

 <div class="c-card" data-id="<?=$row['id'];?>">

Вы используете атрибут data-id в разделе HTML. Но скрипт обрабатывает атрибут id , используемый для получения идентификатора. Таким образом, идентификатор становится нулевым для ajax вызова. Пожалуйста, используйте приведенный ниже код или измените атрибут data-id на id в разделе HTML, как вам нравится.

var action = 'data';
var dataId = $(this).data("data-id");

«id» и «data-id» - это разные атрибуты для HTML. Пожалуйста, используйте те же атрибуты в HTML и скрипте

Answer 2

возможно, потому что нет элемента html (div || p || span || ...) с идентификатором id = "jobber"