php - 我可以在之前附加的调用结果中嵌套 ajax 调用的点击吗？

Question

我正在做一些早期的尝试，通过 AJAX 进行 self 教育，并尝试加快页面速度，而不是依赖 PHP 来显示结果。我遇到了障碍。

我基本上有 3 层数据。有3个数据库表。

• 第一层数据通过PHP循环提取并在页面加载时显示。
• 当单击 A 时，第二层数据通过 AJAX 加载，然后通过 jQuery 附加到页面。
• 当点击第二层时，第三层(我遇到了麻烦)是通过AJAX加载的......并附加在内 之前附加的 B 数据。

就像这样......

<!-- language: lang-html -->
<!-- PHP loop to pull list if Item A data upon page load -->

<p><a href="#" id="A-id" data="NUM" class="a-call">Item A</a></p>
        <!-- click Item A -> AJAX pull B data and append results to .a-results -->

     <div class="a-results">

        <p><a href="#" id="B-id" data="NUM" class="b-call">Item B</a></p>

        <!-- click Item B -> AJAX and append results to .b-results -->

             <div class="b-results">
                <p>B resultrow</p>
                <p>B resultrow</p>
                <p>B resultrow</p>
                <p>B resultrow</p>
             </div>
     </div>

Ajax 示例:

<!-- language: lang-js -->
$('a.a-call').click( function (e) {
        e.preventDefault(); 
        var sid = $(this).attr('data');
        $.ajax({                                      
              url: 'secondtier.php',  
              type: 'POST',
              dataType: 'json',  
              data: ({sid: sid}),      
              success: function(rows) {
                    for (var i in rows) {
                        var row = rows[i];
                        var id = row[0]; 
                        var name = row[1];  
                        var type = row[2]; 

                        $('.a-result').append("<p><a href='#' id='s"+id+"' data='"+id+"' class='b-call'>id: " + id + " name: " + name + " type: " + type + "</a></p><div class='b-data'></div>"); 
                    }
                }
              });
      });

$('a.b-call').click( function (e) {
        e.preventDefault(); 
        var bid = $(this).attr('data');
        $.ajax({                                      
              url: 'thirdtier.php',  
              type: 'POST',
              dataType: 'json',  
              data: ({bid: bid}),      
              success: function(rows) {
                    for (var i in rows) {
                        var row = rows[i];
                        var id = row[0]; 
                        var data = row[1];  
                        var cost = row[2]; 

                        $(this).next('.b-data').append("<p>date: " + date + " cost: " + cost + "</p>"); 
                    }
                }
              });
      });

我的 AJAX 调用本身可以工作，但是我无法通过 B 调用在 A 结果中附加结果。如果将 Item B AJAX 硬编码到 HTML 中，则它可以正常工作，只有在附加它时我才无法使其工作。 任何地方都没有控制台错误。页面上什么也没发生。

我不太了解 jQuery 的使用情况。我尝试了 .live('click', function() 来单击 Item B，但是控制台告诉我它无效。我认为 jQuery 在某个时候放弃了它。

使用google链接到jquery 1.9.1

<!-- language: lang-html -->
<script language="Javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

我的做法是错的吗？我可以在 B 中获取附加的 anchor 来调用另一个 ajax 函数并将更多内容附加到之前附加的 div 中吗？

我不想一次加载所有这些数据。这就是我学习AJAX的原因。该页面当前通过 PHP 加载所有内容，并且由于数据集中的数据集数量较多，页面加载速度很慢。我正在尝试获取仅在单击时加载的特定数据。

Answer 1

您需要使用 delegate() ，因为页面加载时不存在 .b-call 元素，因此 jQuery 不知道这些元素在哪里。因此，您需要将事件委托(delegate)给页面加载后将存在的元素。

$('.a-result').delegate('.b-call','click',function (e) {
        e.preventDefault(); 
        var bid = $(this).attr('data');
        $.ajax({                                      
              url: 'thirdtier.php',  
              type: 'POST',
              dataType: 'json',  
              data: ({bid: bid}),      
              success: function(rows) {
                    for (var i in rows) {
                        var row = rows[i];
                        var id = row[0]; 
                        var data = row[1];  
                        var cost = row[2]; 

                        $(this).next('.b-data').append("<p>date: " + date + " cost: " + cost + "</p>"); 
                    }
                }
              });
      });