Working JQuery Script not working after ajax post response – Jquery ajax

I’d really appreciate any help!

I have a working jquery script. When a div is clicked, it updates the css class to active and executes a working ajax response.

I also have a filter functionality that works too. When a checkbox is ticked it calls a new list of div’s from mysql with all the same class properties. However, when any of these new div’s are clicked the ajax response doesn’t work. If anyone could help I would be incredibly grateful!

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>

This is the outputted response from the filters:

'<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>';

So my question is how do i make the new divs (called from the filter) to continue to be triggered and change class + execute the ajax query.

Thanks so much in advance!