引導程序崩潰和隱藏的疊加層不能與匿名函數一起工作

Question

我在使用Bootstrap 3可摺疊面板的網頁上出現了一些不尋常的問題。在此頁面右側的一列中有一系列圖像，左側是另一列中的一系列面板。當用戶點擊其中一個圖像時，隱藏的疊加div會變得可見，並且該div內的iframe根據圖像標籤上的自定義屬性更新其src屬性。這些面板在點擊鏈接和圖像時會顯示鏈接列表，當您單擊鏈接時，隱藏的疊加div會變得可見，並且iframe的src屬性會根據標籤上的相同自定義屬性進行更新。

我遇到的問題是，當我點擊圖片時，一切都完美無缺，但是當我點擊面板中的鏈接時，覆蓋div變得可見幾分之一秒，然後立即消失。我已經在bootstrap.js摺疊代碼，我的js代碼，元素上，jQuery代碼中設置了斷點，以查找什麼以及爲什麼我的div立即被設置爲隱藏。我找到了一個解決方法，但我不明白爲什麼它的作品，而其他方式沒有。我的解決方法是不使用附加到a標籤的click事件的匿名jquery函數，而是使用onclick屬性爲a標籤分配顯式的js函數。理想情況下，我想爲網頁上的所有元素使用匿名函數，因爲元素數量會發生變化，並且它看起來像是最乾淨的解決方案。任何幫助理解爲什麼我的匿名函數不起作用將不勝感激。

代碼剪斷：

<div class="row" id="contentBlock"> 
<div class="col-md-offset-2 col-md-8"> 
    <div class="row"> 
     <div class="col-md-4"> 
      <div class="panel panel-default"> 
       <div class="survey-panel-heading"> 
        <h4>Training Library</h4> 
       </div> 
       <div class="panel-body"> 
        <p class="czsurvey-help-block" style="margin-bottom:10px;">Click on a category to see available training items</p> 
        <div class="panel-group" id="library"> 
         <div class="panel panel-default"> 
          <div class="panel-heading"> 
           <h4 class="panel-title"> 
            <a data-toggle="collapse" data-parent="#library" href="#category1"> 
             Category #1 
            </a> 
           </h4> 
          </div> 
          <div id="category1" class="panel-collapse collapse"> 
           <div class="panel-body"> 
            <ul> 
             <li><a onclick="return fireOverlay(this);" training-target="../resources/summary_2014_04_11_1397235407.pdf">Working Training 1</a></li> 
             <li><a href="" class="trainingselector" training-target="../resources/summary_2014_04_11_1397235407.pdf">Not Working Training 1</a></li>             
            </ul> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="panel-group col-md-8"> 
      <div class="panel panel-default"> 
       <div class="survey-panel-heading"> 
        <h4>Training Recommended for you</h4> 
       </div> 
       <div class="panel-body text-center"> 
        <p class="czsurvey-help-block" style="margin-bottom:10px;">Click on a training item to view</p> 
        <div class="row"> 
         <div class="col-md-3"> 
          <img class="img-thumbnail trainingselector" src="../resources/Renders/SideViewReported.png" training-target="../resources/summary_2014_04_11_1397235407.pdf"/> 
          <h4>Training 1</h4> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<div id="trainingoverlay"> 
    <div id="trainingcontent"> 
     <iframe id="contentdisplay" src="" frameborder="0" style="width:90%; height:88%;" scrolling="no"></iframe> 
     <h4 style="color:White;">Was this training helpful? 
      <span style="color:White;"> 
       <input type="radio" id="A1" name=Q1 value="yes">Yes 
       <input type="radio" id="A2" name=Q1 value="no">No 
      </span>    
     </h4> 
     <label class="btn btn-czbacknext" id="closebutton"> 
      Close Training 
     </label> 
    </div> 
</div> 

的Javascript：

$(document).ready(function() { 
$(".trainingselector").click(function() { 
    $("#contentdisplay").attr("src", $(this).attr("training-target")); 
    $("#trainingoverlay").show(); 
    $("#trainingcontent").show(); 
}); 
$("#closebutton").click(function() { 
    $("#contentdisplay").attr("src", ""); 
    $("#trainingoverlay").hide(); 
    $("#trainingcontent").hide(); 
}); 
}); 

function fireOverlay(element) { 
$("#contentdisplay").attr("src", $(element).attr("training-target")); 
$("#trainingoverlay").show(); 
$("#trainingcontent").show(); 
} 

相關CSS（我如何隱藏覆蓋...）

#trainingoverlay { 
position: fixed; 
width: 100%; 
height: 100%; 
top: 0px; 
left: 0px; 
background-color: rgba(0,0,0,.55); 
display: none; 
z-index: 1; 
} 
#trainingcontent { 
position: fixed; 
width: 50%; 
height:60%; 
margin-left: 25%; 
padding-top:2%; 
top: 150px; 
text-align: center; 
display: none; 
overflow: hidden; 
z-index: 100; 
background-color: rgba(0,0,0,.9); 
} 

Answer 1

這不是一個匿名與命名功能問題。如果您通過onClick將處理程序直接添加到a標記並從中返回false，則可以有效地抑制click事件的默認處理。也就是說，你點擊一個鏈接不會做它通常做的事情（加載鏈接目標）。由於您的fireOverlay沒有return陳述，但您使用return fireOverlay()（返回undefined，因爲沒有返回語句的函數的值爲undefined）在您的onClick=中，因此您將阻止默認事件處理（您可以通過返回來自onClick處理程序的false或undefined）。

如果您使用的是jQuery，您必須執行相同的操作（防止默認設置），以便瀏覽器不會跟隨鏈接。

變化

$(".trainingselector").click(function() { 
    $("#contentdisplay").attr("src", $(this).attr("training-target")); 
    $("#trainingoverlay").show(); 
    $("#trainingcontent").show(); 
}); 

到

$(".trainingselector").click(function (event) { 
    $("#contentdisplay").attr("src", $(this).attr("training-target")); 
    $("#trainingoverlay").show(); 
    $("#trainingcontent").show(); 
    event.preventDefault(); 
}); 

這，顧名思義，防止默認事件處理使瀏覽器保持在同一頁上，並沒有跟隨鏈接。在您的功能的修改版本event中填入通過點擊鏈接生成的點擊事件。通過在該事件對象上調用preventDefault()，您可以在完成處理函數後阻止瀏覽器執行正常業務。

Btw。：只要在處理函數結束之前調用它，那麼在處理函數的哪個位置（頂部，底部，之間的某個位置）都可以調用preventDefault()。