Question

有点难过这个，所以我希望你们能帮忙。

看起来我可能找到了与IE相关的jQuery错误。创建了一个小测试（包括在这里），我可以解决这个问题。在Firefox和Chrome中正常工作，在IE8-9中失败。

问题是DIV“podcastStatus”在事件回调中发生更新的正确时刻没有更新。您可以使用IE工具和Firebug在本地测试它，并设置我在代码中注释的断点。

步骤：

在Firebug和IE中设置断点
根据我在代码中的评论开发工具
点击“下一步”或“上一页”
根据您点击的按钮，DIV中的文字应更改为“下一个”或“上一个”
DIV中的文字应该恢复为“正在播放......”

我认为它与innerHTML有关，但我已经尝试了innerHTML DIV包装技巧和无骰子。

注意：我已经使用了.text（）和.html（），没有解析。

以下是测试用例：

<body>

<style type="text/css">
    #podcastStatus {
        background-color: ButtonHighlight;
        font-size: 120pt;
        font-weight: bolder;
        color: Black;
        margin: 0 auto;
        text-align: center;
        position:absolute; top:0; bottom:0; left:0; right:0;
        margin:auto; height:200px; width:100%;
        z-index: 100;
    }
</style>

<div id="podcastStatus">Playing...</div>        

<div id="targetBtns">
<input type="button" name="prev" id="prev" value="Prev"/>
<input type="button" name="next" id="next" value="Next"/>
</div>        

<script>
function onButtonClicked(e) {
    switch (e.target.defaultValue) {
        case "Next":
            // Use IE tools or Firebug...
            //Set breakpoint here. Immediate after this executes, DIV text should be updated to "Prev"....
            $('#podcastStatus').html("Prev").show();
            break;
        case "Prev":
            // Use IE tools or Firebug...            
            //Set breakpoint here. Immediate after this executes, DIV text should be updated to "Next"....            
            $('#podcastStatus').html("Next").show();
            break;
    }

    //Set breakpoint here. DIV should show either "Prev" or "Next" at this point...        
    playPause();
}        

function playPause() {
    $('#podcastStatus').text("Playing...").fadeIn('slow');
}   

$( "#targetBtns" ).click( function(event) { onButtonClicked(event) } );

</script>            

</body>

Answer 1

您的示例代码会导致div将其文本更改为“Prev”或“Next”并显示。然后它调用一个函数，使同一个DIV的文本被设置为'Playing ...'并告诉它淡入显示 - 即使它已经显示。

文本更改发生得太快，您永远不会看到“上一个”或“下一个”文字
如果它已经显示，它将不会淡入。

对于这两个问题，代码出现，无法在所有浏览器中执行任何操作。

所有这一切，这就是我如何修改你的JS以保持一致性：

var $podcastStatus = $( '#podcastStatus' );

function playPause()
{
    $podcastStatus.text( 'Playing...' ).fadeIn( 'slow' );
}   

$( '#targetBtns' )
    .delegate( 'input[type="button"]', 'click', function onButtonClicked( e )
    {
        var text;
        switch( $( this ).val() )
        {
            case 'Next':
                text = 'Prev';
                break;

            case 'Prev':
                text = 'Next';
                break;
        }

        $podcastStatus.html( text ).show();

        playPause();

        e.preventDefault();
    } );

Answer 2

Internet Explorer不支持target属性。相反，微软发明了srcElement。

如果您检查是否存在target并回退到srcElement，那么您的代码应该有效：

switch ((e.target || e.srcElement).defaultValue) {

但我考虑使用更多的jQuery和更少的JavaScript;）

使用jQuery在事件回调中设置元素值

2 个答案: