javascript - FF 和 Chrome 上的奇怪事件绑定(bind)问题 - 仅在第一次点击时

Question

这是在我的 Git 插件页面上，我在网页中有两个交互式演示。在其中一个演示页面中，我有一个小对话框，当你点击一个 div 时它会打开。

奇怪的问题是，当我点击上面写着 attrchange beta 的标题时，这个对话框被打开了。仅当第一次点击标题 attrchange beta 时才会发生这种情况，点击页面中的任何其他元素可修复此问题。

插件页面 http://meetselva.github.io/attrchange/ [已修复，使用以下网址查看问题]

http://meetselva.github.io/attrchange/index_so_issue.html

下面是代码，

<!-- The title -->
<h1 id="project_title">attrchange <span class="beta" style="text-decoration: line-through;" title="Almost there...">beta</span></h1>

<!-- Main dialog that has link to the sub-dialog -->
<div id="attributeChanger">
  <h4 class="title">Attribute Changer</h4>
  <p>Listed below are the attributes of the div:</p> 
  <div class="attrList"></div>
  <div class="addAttribute text-right"><a href="javascript:void(0)" title="add new attribute">add new attribute</a></div>
</div>

<!-- Sub-dialog -->
<div id="addOrmodifyAttr" title="Add/Modify Attribute">
    <h4 class="title">Add/Modify Attribute</h4>
     <p><b>Attr Name</b> <input type="text" class="float-right attrName"></p>    
     <p><b>Attr Value</b> <input type="text" class="float-right attrValue"/></p>
     <div class="clear">&nbsp;</div>
     <button type="button" class="float-right close">Close</button>
     <button type="button" class="float-right update">Update</button>
     <div class="clear"></div>
</div>

JS:

var $attributeChanger = $('#attributeChanger');
var $attrName = $('.attrName', '#addOrmodifyAttr'),
    $attrValue = $('.attrValue', '#addOrmodifyAttr'),
    $attrAMUpdate = $('.update', '#addOrmodifyAttr');

//Handler to open the sub-dialog
$attributeChanger.on('click', '.addAttribute', function () {
    $attrName.val('').removeClass('nbnbg');
    $attrValue.val('');
    $('#addOrmodifyAttr, #overlay').show();
});

Answer 1

问题是应用于您的 #attributeChanger div 的 CSS。

如果您查看应用于它的 CSS:

#attributeChanger {
    background-color: #FEFFFF;
    border: 1px solid #4169E1;
    color: #574353;
    font-size: 0.9em;
    margin: 10px;
    min-height: 50px;
    min-width: 150px;
    opacity: 0;
    padding: 2px;
    position: absolute;
    top: -200px;
    z-index: 1;
}

您会注意到该位置是 absolute，它位于您的 Logo 上方。所以你点击的实际上是你的#attributeChanger div。

要修复它，您可以使用 display: none; 隐藏 #attributeChanger，然后使用 $('#attributeChanger').show(); 在 jQuery 中，当它进入实际 View 时。