jquery - jQuery .load 内容然后 .toggle 没有 ajax 请求

Question

我有一个按钮。当我单击它时，内容会加载。当我在内容切换后单击它时（显示：无）。但它仍然发送ajax请求。

如何检查内容是否已加载以在没有 ajax 请求的情况下开始切换？

<div id="morechan">
    <a id="btnC" href="#" title="Kanalu saraksts"><i class="icon-caret-down"></i></a>
</div>
<div id="channel-list">
</div><!-- end channel-list -->

(function($) {
  $("#btnC").click(function() {
    $('#channel-list').html('loading...').load('channels.html');
  }); 
})(jQuery);

Answer 1

我建议设置一个数据属性并对其进行测试，如果未设置则防止加载

$("#btnC").click(function() {
   if( typeof( $('#channel-list').data("contentLoaded") ) != "undefined" ) {
       //Do toggle code here.
       return;
   } else {
       //Do load code here.
       $('#channel-list').load("http://www.someurl.com",function() {
          $(this).data("contentLoaded",true);
       });
   }
});

设置为何contentLoaded时false/如果需要重新加载内容并检查它是否true在false点击事件中。

var contentLoaded = $('#channel-list').data("contentLoaded");
if( typeof( contentLoaded ) != "undefined" && contentLoaded ) {
   //Do toggle code here.
   return;
}