0

我已经动态创建了行，我希望当我将鼠标悬停在一行上时，一个 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 谢谢你的帮助

4

2 回答 2

0

我已经整理出了问题，也就是这行代码：

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/

在 fire fox 和 chrome 中测试。

于 2013-09-30T13:35:55.680 回答
0

我已经在 Firefox 中测试了你的小提琴。似乎问题出在以下行：

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

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

于 2013-09-30T13:31:24.280 回答