Question

我在div .cshtml视图页面中有文本框

@if(Model.WorkFlowValue=="Qualified" || Model.WorkFlowValue=="Not Qualified")
{
<div id="textboxWorkFlow">
@Html.TextBoxFor(m => m.WorkFlowValue, new { @class = "col8 last right status-field", disabled = "disabled" })
</div>
}
else
{
@Html.TextBoxFor(m => m.WorkFlowValue, new { @class = "col8 last right status-field", disabled = "disabled" })
}

在javascript mouseover事件中在Google Chrome中成功触发但在FireFox中失败。

$(document).ready(function(){
$("#textboxWorkFlow").mouseover(function(){
console.log('Mouse In');
}).mouseout(function(){
console.log('Mouse Out');
});
});

在浏览器中渲染控件

<div id="textboxWorkFlow"> <input id="WorkFlowValue" class="col8 last right status-field" type="text" value="Qualified" name="WorkFlowValue" disabled="disabled"> </div>

小提琴请在Firefox中测试。 http://jsfiddle.net/NLT8p/143/

Answer 1

我建议您尝试使用mouseenter而不是mouseover和mouseleave而不是鼠标

$("#textboxWorkFlow").mouseenter(function() {

});

$("#textboxWorkFlow").mouseleave(function() {

});

Answer 2

我发现解决方案firefox遇到了一个错误http://bugs.jquery.com/ticket/11382

禁用属性不能与firefox一起使用只使用readonly属性而不是disable。

@if(Model.WorkFlowValue=="Qualified" || Model.WorkFlowValue=="Not Qualified")
{
<div id="textboxWorkFlow">
@Html.TextBoxFor(m => m.WorkFlowValue, new { @class = "col8 last right status-field", @readonly = "true" }) //replace disabled with readonly
</div>
}
else
{
@Html.TextBoxFor(m => m.WorkFlowValue, new { @class = "col8 last right status-field", @readonly = "true" })
}

Answer 3

试试这个

$(document).ready(function(){
   $("#textboxWorkFlow").on("mouseenter",function(){
       alert('mouse In');
    }).on("mouseleave",function(){
       alert('Mouse Out');
    });
});

工作JSFiddle

修改根据我们的讨论，发现鼠标事件对于禁用的输入不起作用。 See This

有类似下面的工作。需要使用具有绝对位置的div。

<div id="textboxWorkFlow" style="position:relative;"> <input type="text" id="workflow" disabled="disabled"/> <div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div> </div>

工作JSFiddle for Disabled Input

Answer 4

创造了这个小提琴来复制你的问题

$(document).ready(function(){
$("#textboxWorkFlow").mouseover(function(){
alert('Mouse In');
}).mouseout(function(){
alert('Mouse Out');
});
});

这适用于所有浏览器http://jsfiddle.net/65ak7/

请检查页面上是否有两个具有相同ID的元素。

Mouseover Mouseout无法在Firefox中运行

4 个答案: