Bootstrap 折叠和隐藏覆盖不适用于匿名函数

Question

在我正在设计的网页上使用 Bootstrap 3 可折叠面板时，我遇到了一些不寻常的问题。在此页面上，右侧的一列中有一系列图像，左侧的另一列中有一系列面板。当用户单击其中一个图像时，隐藏的覆盖 div 会变得可见，并且该 div 内的 iframe 会根据图像标签上的自定义属性更新其 src 属性。面板在单击和喜欢图像时会显示链接列表，当您单击链接时，隐藏的覆盖 div 会变为可见，并且 iframe 的 src 属性会根据 a 标签上的相同自定义属性进行更新。

我遇到的问题是，当我单击图像时，一切正常，但是当我单击面板中的链接时，覆盖 div 会在几分之一秒内可见，然后立即再次消失。我已经在 bootstrap.js 折叠代码、我的 js 代码、元素上、jquery 代码中设置了断点，以查找我的 div 立即被设置回隐藏的内容和原因。我找到了解决方法，但我不明白为什么它有效，而另一种方式则无效。我的解决方法是不使用附加到 a 标签的 click 事件的匿名 jquery 函数，而是使用 onclick 属性将显式 js 函数分配给 a 标签。理想情况下，我想对页面上的所有元素使用匿名函数，因为元素的数量会发生变化，这似乎是最干净的解决方案。任何有助于理解为什么我的匿名函数不起作用的帮助将不胜感激。

代码片段：

<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，则您实际上是在抑制单击事件的默认处理。也就是说，您对链接的点击不会像通常那样做（加载链接目标）。由于您的fireOverlay 没有return 语句，但您正在使用return fireOverlay()（返回undefined，因为没有return 语句的函数的值是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()，您将阻止浏览器在完成处理函数后执行其正常业务。

顺便说一句：只要在处理函数结束之前调用preventDefault()，在处理函数的哪个位置（顶部、底部、介于两者之间）都没有关系。