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? — matthias_h
– matthias_h, Commented Apr 12, 2020 at 12:09
@matthias_h not unless I am being thick! I am already using .on, would you mind helping me? — T. Sproull
– T. Sproull, Commented Apr 12, 2020 at 12:17

MITHESH K M · Accepted Answer · 2020-04-12 14:02:14Z

1

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

answered Apr 12, 2020 at 14:02

MITHESH K M

364 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

noshad b.e · Accepted Answer · 2020-04-12 12:35:26Z

0

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

answered Apr 12, 2020 at 12:35

noshad b.e

12412 bronze badges

Collectives™ on Stack Overflow

Working JQuery Script not working after ajax post response

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related