成功のためにJquery Ajaxを実装する方法は？

Question

この例ではJquery Ajaxをどのように実装するのですか？

[Getcatが完了しました]をクリックします。類似しているが、Cat 1、Cat 2をクリックすると失敗する。

私はそれが簡単だと確信していますが、ここでもいくつかの基本を学んでいます。おかげ

これはこれは、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> 

実行コードスニペットある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> 

です。

$('.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

あなたが子供のIDを取得しているので、あなたが実際にそこに親を必要としません。..

ここフィドルです： 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.... 
});