SELECT 菜单中的选项被隐藏答案

【问题标题】：Options from SELECT menu is hidingSELECT 菜单中的选项被隐藏
【发布时间】：2012-09-24 09:56:28
【问题描述】：

我正在尝试将“选择菜单”“添加到”DIV。菜单在 DIV 上的“鼠标悬停”上是“prependingTo”。在这个菜单中是带有一些选项的 SELECT。但是当我想选择其他选项时，SELECT 菜单中的选项被隐藏了。这没用。为什么？

HTML：

 <div id="add" style='width:200px; background:cyan;'> + + + + + + + + + </div>
 <div id="menu">
     <div style="display:inline-block;">
         <button>1</button>
         <button>2</button>
     </div>
     <div style="display:inline-block;">
         <select id="fs">
            <option value="Arial">Arial</option>
            <option value="Verdana ">Verdana </option>
            <option value="Impact ">Impact </option>
            <option value="Comic Sans MS">Comic Sans MS</option>
         </select>
     </div>

 </div>
 <br>
 <div id="cont">
    <div id="container">
       <div id="divA">1111<br><br>&nbsp;</div>
       <br>
       <div id="divB">2222<br><br>&nbsp;</div>
       <br>
       <div id="divC">33333<br><br>&nbsp;</div>
       <br>
       <div id="divD"><br>&nbsp;</div>
    </div>
 </div>

CSS：

  #container{ padding: 100px;  }
  #menu{  font-size: 10px;  
       position: absolute;
       background-color: none;
       letter-spacing: 0px;
  }
  #divA{ background-color: yellow; }
  #divB{ background-color: red;  }
  .divB{ background-color: red; }
  #divC{ background-color: cyan; }
  #divD{ background-color: brown; }

jQuery:

  $("#add").live("click", function() {
     var timestamp = Date.now();
     $("#container").prepend('<div class="divB" id="'+timestamp+'">'+timestamp+'<br><br></div>');
  });
  $("#container div").live({
     mouseover: function() {
        if( $(this).closest("#menu").length ){ return; }
        $('#menu').prependTo($(this));
     }
  });

【问题讨论】：

标签： jquery select menu option prepend

【解决方案1】：

这样试试

$("#container").bind({
    mouseover: function() {
        if( $(this).closest("#menu").length ){ 
            return; 
        }
        $('#menu').prependTo(this);
        $("#container").unbind('mouseover');       
    }
});

【讨论】：

感谢您帮助我，但我更新了我的代码和示例。有一些动态添加的 DIV。您的解决方案适用于那些。然后脚本停止。

【解决方案2】：

你可以使用find方法代替closest，closest选择元素最近的父元素并且你想找到元素的后代，你的if语句总是返回false，还要注意@ 987654328@ 已弃用，您可以改用on。

$(document).on({
        mouseover: function(e) {
            if( $(this).find("#menu").length ){ return; }
            // or if ( $('#menu', this).length ){ return; }
            $('#menu').prependTo($(this));

        }
}, "#container div");

http://jsfiddle.net/h7y3Z/

【讨论】：

谢谢。这个工作正常。在这种情况下，“onclick”比“live”好吗？
@Patrik 是的，on 比 live 好太多了，如果你想委托事件，live 也已被弃用，在未来的 jQuery 版本中，它将从 API 中删除.
但是，当我在菜单中动态插入另一个 DIV 时，“onclick”不起作用.... :( jsfiddle.net/ynternet/h7y3Z/1
@Patrik 你没有绑定 click ，你绑定的是鼠标悬停，它可以工作 jsfiddle.net/UYvMZ
@Patrik 好的，我明白了，如果您想使用on 方法委托事件，您应该从元素或文档对象的静态父对象之一委托事件，尝试更新的代码。