在JSON數據上運行jQuery

Question

我有一個分配給標簽頁鏈接的AJAX調用函數，它將從php頁面獲取結果，然后顯示在頁面上。

這是下面的ajax代碼

$(document).ready(function(){
    $(".resolved_tab_copy").click(function(){
     $.ajax({
        type:"POST",
        url:"dynamic_tab.php",
        async:true,
         success:function(data){
       $('.main_display_4resolve').html(data);
         }
       });
        console.log("Hello");
    });
 });

檢索到的數據格式化為HTML元素，我希望能夠在這些元素上運行jQuery click和其他事件，如下所示。

echo '<div class="ticket_div">
            <div class="menu_wrapper">
                  <div class="resolved_diag_click" id="',$each_issue['issue_id'],'">Notes</div>
                  <div class="resolved_diag_res_click" id="',$each_issue['issue_id'],'">Resources</div>
              </div>
            <div class="resolved_diag_show" id="resolved_notes_displayDiv',$each_issue['issue_id'],'">
                  <div class="resolved_diag_result" id="resolved_diag_resultID',$each_issue['issue_id'],'">';
                  $target_issueid=$each_issue['issue_id'];
                       $diag_list=get_diag_result($target_issueid);

                      foreach($diag_list as $each_diag){
                        echo '<div class="diag_txt">';
                        $name_id=$each_diag['diag_logger'];
                            $name_list=get_name($name_id);
                                foreach($name_list as $each_name){
                                    echo '<div class="resolved_diag_logger">',$each_name['fname'],' ',$each_name['lname'],'</div>';
                                }
                            echo '<div class="resolved_diag_time">',$each_diag['diag_time'],'</div>';
                            echo '<div class="resolved_diag_desc">',$each_diag['diag_desc'],'</div>';
                        echo '</div>';
                        };


                      echo '<ul class="tkt_ctrl">
                          <li class="resolved_tkt_ctrl_cmnt_click_',$each_issue['issue_status'],'" id="resolved_cmnt_clickid',$each_issue['issue_id'],'" alt="',$each_issue['issue_status'],'">Comment</li>
                           <li class="resolved_tkt_ctrl_li_',$each_issue['issue_status'],'" alt="',$each_issue['issue_status'],'">Email</li>
                           <li class="resolved_tkt_ctrl_resolve_',$each_issue['issue_status'],'" id="resolved_resolveID',$each_issue['issue_id'],'" alt="',$each_issue['issue_status'],'">Resolved</li>
                      </ul>
              </div>

我希望能夠在上運行jQuery事件

<div class="resolved_diag_click" and display   <div class="resolved_diag_show".

靜態所有jquery均正常工作但通過ajax調用檢索到jQuery事件后，此頁面無效。

我一定錯過了一些非常愚蠢的東西，我無法解決這個問題..如果有人可以向我展示可以挽救生命的正確方向。.另外，我也在研究jQuery .on和.live事件，那就是我們應該嘗試..謝謝

Answer 1

如果您的jquery代碼具有針對當時（在ajax之前）不存在的元素的事件，那么您需要在它們出現時說出我想針對的內容 。

這可以通過@Shannon解決方案jquery的.on（）來實現，或者如果您的jquery是1.6.2或更早版本 ，則可以使用.live（） （在1.7+上已棄用）

使用方式如下：

$(document).ready(function() {
   $("#obj").live("click",function() {
   });
});

上面的代碼與普通的.click事件類似，但是即使#obj存在並且是動態創建的，該事件仍然有效。

Answer 2

使用jquery的.on函數 。 即使在頁面加載之后創建元素，元素也將具有事件偵聽器。

$("body").on("click", ".resolved_diag_click", function (e) {
    // handle event here
    alert("foo");
});

Answer 3

如果您是從ajax添加元素或動態添加的，則必須使用on方法。

.on（）方法將事件處理程序附加到jQuery對象中當前選定的元素集。 從jQuery 1.7開始，.on（）方法提供了附加事件處理程序所需的所有功能。 有關從較舊的jQuery事件方法轉換的幫助，請參見.bind（）、. delegate（）和.live（）。

 $(document)on(event,selector,function()
{
};

就你而言

$(document)on("click",".resolved_diag_click",function()
    {
    };

jQuery的API文檔