Question

我正在做一些早期的尝试，在AJAX中教育自己并尝试加速页面而不是依靠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结果中追加结果。如果它被硬编码到HTML中，则项目B AJAX工作得很好，只有当它被附加时我才能使它工作。 任何地方都没有控制台错误。页面上什么也没发生。

我对jQuery的使用并不是最新的。我为项目B点击尝试.live('click', function()，但是控制台告诉我它无效。我假设jQuery在某些时候放弃了它。

使用谷歌链接到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 中获取附加的锚点来调用另一个ajax函数并将更多内容附加到之前附加的div中吗？

我不想一次加载所有这些数据。这是我学习AJAX的原因。该页面当前通过PHP加载所有内容，由于数据集中的数据集数量较慢，因此页面加载速度较慢。我试图让特定数据只在点击时加载。

Answer 1

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

$('.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>"); 
                    }
                }
              });
      });

Answer 2

我认为问题是由于在获取B时创建了获取A数据的链接。

单击事件处理程序（$('a.b-call').click）在实际DOM元素存在之前注册，因此不会被触发。

要使此事件处理程序正常工作，您需要更改代码。页面加载时存在a-results div，因此您可以将事件处理程序附加到此元素，只需指定a.b-call的选择器：

示例：

$('.a-results').on('click', 'a.b-call', function(e) {
    // your B load code here
}

我可以在之前添加的调用结果中嵌入ajax调用的点击吗？

2 个答案: