Working JQuery Script not working after ajax post response

Question

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!

Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — matthias_h, Apr 12 '20 at 12:09
@matthias_h not unless I am being thick! I am already using .on, would you mind helping me? — T. Sproull, Apr 12 '20 at 12:17
For dynamically added content it's necessary to delegate events from a parent element that's already there when the page is initally loaded, e.g. document: $(document).on('click', '.c-card', function(event){...}); — matthias_h, Apr 12 '20 at 12:19
@matthias_h thank you so much for taking the time to answer this. All working perfectly now. My hero! — T. Sproull, Apr 12 '20 at 12:26

score 1 · Answer 1 · answered Apr 12 '20 at 14:02

I have been thought your actual problem was the ajax response is getting null.

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

You are using the data-id attribute in the HTML section. But the script handles the id attribute using for getting the id. So the id is getting null for ajax call, Please use the below code or change the data-id attribute to id in the HTML section as you like.

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

"id" and "data-id" are different attributes for HTML. Please use same attributes in HTML and script

score 0 · Answer 2 · answered Apr 12 '20 at 12:35

0

maybe because there is no html(div|| p || span ||...) element that have id of id="jobber"

answered Apr 12 '20 at 12:35

noshad b.e

114
11

Working JQuery Script not working after ajax post response

2 Answers2