javascript - 当我将鼠标悬停在动态创建的行上时，该行中的选择元素(标签)选项没有正确下拉。火狐问题？

Question

我动态创建了行，我希望当我将鼠标悬停在一行上时，div 会附加到该行，而当我将鼠标悬停在该行上时，div 应该消失。我基本上让它工作了，只是悬停行中的一个 td 是一个选择元素，并且由于我实现了悬停效果，所以我无法选择选项，因为选项没有正确下拉。你能告诉我为什么吗？

jsfiddle用于说明

嗯，我只是在 chrome 上对此进行了测试，并且选项正在按预期下降。但是我在 firefox 中进行开发，上面的问题与 firefox 有关，但与 chrome 无关。太糟糕了。关于在 Firefox 上工作的任何建议。

$(".row").hover(function(){
    //checks to see if the new div(cancel) exist if it doest append it to the row
    if($(this).children(".cancel").length == 0){
        $("<div class = 'cancel'>X</div>").appendTo($(this));

    //clicking on the div should remove the row
        $(".cancel").click(function(){
               $(this).parent().hide('slow', function(){
               $(this).remove();
       })

    }  
}, function(){
    $(this).find("div.cancel").remove();
})

我认为这可能与事件冒泡或传播或我的逻辑有关。 Jsfiddle 谢谢你的帮助

Answer 1

我已经整理出了问题部分，就是这行代码:

var tr = "<tr class = 'row' style='display:block;'><td>"+ suggestion.value + "</td><td><select class ='select' >" + select + "</select><td class = 'price'>" +suggestion.price+ "</td><td class = 'total'></td></tr>";

在这里，如果你仔细看的话，我已经添加了这一段:style='display:block;' 到你的 tr 结构中。在前面的例子中，您的 tr 没有任何样式，DOM 本身将样式构造为:style=""。由于行中没有样式，X 图标没有出现。

在这里找到工作 fiddle :http://jsfiddle.net/mSsqa/3/

在 fire fox 和 chrome 中测试。