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

我在firefox中测试了你的小提琴。似乎问题出在下面一行：

$("<div class = 'cancel'>X</div>").appendTo($(this));

每次，在悬停时，您都会在行中附加一个div并将其删除。而不是在创建行并隐藏它时附加div。在悬停显示div。这解决了你的问题。

Answer 2

我已经解决了问题部分，即这行代码：

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图标没有出现。

在这里找到工作小提琴：http://jsfiddle.net/mSsqa/3/

同时测试了火狐和铬。

当我将鼠标悬停在动态创建的行上时，行中的select元素（标记）选项不会正确下拉。 Firefox问题？

2 个答案: