Question

如何在此示例中成功实现Jquery Ajax？

我点击Getcat完成了。类似但我点击Cat 1，Cat 2 ...然后失败。？

我相信这很容易，但仍然在这里学习一些基础知识。感谢

这是 cat.php

<div class="cat">
  <div data-id="4" class="catget">Cat 4</div>

  <div data-id="5" class="catget">Cat 5</div>

  <div data-id="6" class="catget">Cat 6</div>

  <div data-id="7" class="catget">Cat 7</div>

  <div data-id="8" class="catget">Cat 8</div>
</div>

这是 index.php

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script> $('.catget').click(function() {
var id = $(this).parent().data('id');
          $.ajax({
            url: 'cat.php',
            data: {
              "id": id
            },
            type: 'post',
            success: function(result) {
              var $response = $(result);
              var cat = $response.filter('.cat').html();
              $('.catsub').html(cat).fadeIn(700);
            }
          });
        });</script>
        <div data-id="1" class="catget">Getcat</div>
        <div class="catsub">Cat List</div>

运行代码段。

 $('.catget').click(function() {
   var id = $(this).parent().data('id');
   $.ajax({
     url: 'cat.php',
     data: {
       "id": id
     },
     type: 'post',
     success: function(result) {
       var $response = $(result);
       var cat = $response.filter('.cat').html();
       $('.catsub').html(cat).fadeIn(700);
     }
   });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div data-id="1" class="catget">Getcat</div>
<div class="catsub">Cat List</div>

Answer 1

你实际上并不需要那里的父母，因为你得到了孩子们的身份......

这是一个小提琴： https://jsfiddle.net/xojzghfv/

你需要这样的东西让你的新元素发挥作用。

您可以阅读此文章以供参考：https://learn.jquery.com/events/event-delegation/

$(document).on('click', '.catget', function(){
    var id = $(this).data('id');
   //insert the rest of your code here....
});

如何成功实现Jquery Ajax？

1 个答案: