自舉負載與ajax崩潰面板

我想加載可摺疊面板與Ajax。我得到了它的工作，但我的觸發器觸發了一個標籤，所以當你打開並關閉面板時會調用ajax腳本。當您關閉面板應該不會加載它，這是超載..自舉負載與ajax崩潰面板

我的代碼：

<div class="panel-group" id="accordion">  
<div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse1">First panel</a></h4> 
    </div> 
    <div id="collapse1" class="panel-collapse collapse"> 
     <div class="panel-body"> 
       <div id="depUsers511"><!-- here users will be loaded through ajax --></div> 
     </div> 
    </div> 
</div> 
<div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Second panel</a></h4> 
    </div> 
    <div id="collapse2" class="panel-collapse collapse"> 
     <div class="panel-body"> 
       <div id="depUsers511"><!-- here users will be loaded through ajax --></div> 
     </div> 
    </div> 
</div>

的JavaScript：

$('#accordion a').click(function() { 

    var collapse_element = event.target; 
    alert(collapse_element); 

    var href = this.hash; 
    var depId = href.replace("#collapse",""); 

    var dataString = 'depId='+ depId + '&do=getDepUsers'; 
    $.getJSON(dir_pre + 'ajax/users.php?' + dataString, function(data) { 
     $('#depUsers'+depId).html(data); 
    }); 
})

了AJAX腳本返回div的內容。所以，它的工作原理，但我正在尋找正確的方法來觸發ajax負載觸發器...我想我需要使用「show.bs.collapse」事件，但無法找到如何使用此在包含多個動態面板（具有其自己的ID）的面板上。

感謝您的幫助！

$('#accordion a').click(function() { 
     if($(this).hasClass("panelisopen")){ 
      $(this).removeClass("panelisopen"); 
     } else { 
      var href = this.hash; 
      var depId = href.replace("#collapse",""); 

      $(this).addClass("panelisopen"); 

      var dataString = 'depId='+ depId + '&dep=1&do=getDepUsers'; 
      $.getJSON(dir_pre + 'ajax/users.php?' + dataString, function(data) { 
       $('#depUsers'+depId).html(data); 
      }); 
     } 
    });

不是最好的解決方案，我想：

來源

2014-01-24 netcult

我通過當數據加載增加一個「開放式」級，並刪除同一類，如果打開後點擊樣的解決了這個問題，但它的工作原理。

來源

2014-01-27 07:39:44 netcult

你可以試試這個：

$('#accordion').on('show.bs.collapse', function(e){ 
    var depId = $(e.target).attr('id').replace('collapse',''); 
    ... 
});

來源

2014-08-24 04:11:07 SQL

我想，而不是依賴於元素ID，並與數字污染，並做字符串替換，因此，可以使data屬性使用：

<div class='collapse' data-dep-id="1" />

然後在JS：

var $elementId = $(e.target).data('dep-id')

而且同樣適用於阿賈克斯網址和其他屬性，如果需要。

來源

2017-03-27 13:56:23

自舉負載與ajax崩潰面板

回答

相關問題