jQuery無法從getJSON中選擇元素

我正在使用.each方法和.getJSON方法在JSON文件中打印出對象。這工作正常，但我無法添加一個點擊功能的元素已被打印出來。我試圖用「點擊」ID將函數綁定到div。jQuery無法從getJSON中選擇元素

var loadData = function() { 
    $.getJSON("profiles2.json", function (data) { 
     var html = []; 
     html.push("<div id='click'>Click here</div>"); 
     $.each(data.profiles, function (firstIndex, firstLevel) { 
      html.push("<h2>" + firstLevel.profileGroup + "</h2>"); 
     }); 
     $("#data").html(html.join('')); 
    }); 
}; 
$(document).ready(function() { 
    loadData(); 
    $("#click").click(function() { 
     console.log('clicked'); 
    }); 
});

來源

2013-05-09 Arausio

$.getJSON()（像其他Ajax方法）是異步的，所以它會立即返回結果都回來了。因此，您的loadData()方法也會立即返回，然後嘗試將處理程序綁定到尚未添加的元素。

在添加元素後，將.click(...)綁定移動到$.getJSON()的回調中，它將起作用。

另外，使用委派事件處理程序：

$("#data").on("click", "#click", function() { 
    console.log('clicked'); 
});

...這實際上結合了處理器到確實當時存在的父元素。當發生點擊時，它會測試它是否在與第二個參數中的選擇器相匹配的元素上。除此之外，不要將點擊處理程序綁定到div，除非您不關心身體上無法使用鼠標或其他指針設備的人（或者簡單地選擇不使用鼠標或其他指針設備）。使用錨點元素（按照您認爲合適的樣式），以便它們「點擊」 - 可通過鼠標的鍵盤和訪問。

來源

2013-05-09 23:12:42 nnnnnn

$ .getJSON是一個異步調用，當您嘗試綁定到它注入DOM的元素時可能還沒有完成。將元素追加到底部的頁面後，將綁定放入$ .getJSON調用中。

來源

2013-05-09 23:16:32 MBielski

_「可能還沒有完成」_ - 它_definitely_不會完成，無論Ajax響應速度有多快。在調用'$ .getJSON（）'回調之前，當前的代碼塊肯定會完成執行。 – nnnnnn 2013-05-09 23:32:08

感謝您的快速回復傢伙。我將.done方法添加到了我的getJSON中，並且它可以工作。乾杯！！！ – Arausio 2013-05-10 00:04:33

jQuery無法從getJSON中選擇元素

回答

相關問題