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

【问题标题】：Setting element value within an event callback using jQuery使用 jQuery 在事件回调中设置元素值
【发布时间】：2011-04-06 03:42:00
【问题描述】：

有点被这个难住了，所以我希望你们能提供帮助。

看起来我可能发现了一个与 IE 相关的 jQuery 错误。创建了一个小测试（包括在这里），我可以欺骗这个问题。在 Firefox 和 Chrome 中运行良好，在 IE8-9 中失败。

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

步骤：

在 Firebug 和 IE 中设置断点
根据我在代码中的 cmets 开发工具
点击“下一个”或“上一个”
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>

【问题讨论】：

哇，一开始我什至没有注意到提问者是谁——嗨，雷伊！今晚有一杯好水吗？ ;)

标签： jquery innerhtml

【解决方案1】：

您的示例代码导致 div 将其文本更改为“上一个”或“下一个”并显示。然后它调用一个函数，该函数将同一 DIV 的文本设置为“正在播放...”并告诉它淡入显示——即使它已经在显示。

文本更改发生得如此之快，以至于您看不到“上一个”或“下一个”文本
如果已经显示，则不会淡入。

由于这两个问题，代码似乎在所有浏览器中什么都不做。

说了这么多，无论如何，这就是我修改你的 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();
    } );

【讨论】：

感谢各位的帮助。问题似乎与 IE 调试器没有重新绘制您正在单步执行的文本有关。使用了 setTimeout，现在它可以与@JAAulde 提到的内容同步。
我想我在使用 Visual Web Developer 2010 Express 调试 IE 时遇到了几次同样的问题。很高兴你解决了！
谢谢。非常感谢您的反馈和帮助。 :)

【解决方案2】：

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

如果您检查target 的存在并回退到srcElement，您的代码应该可以工作：

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

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

【讨论】：

IE 识别目标，因为 jQuery 规范化了事件模型。所以代码运行良好。它与目标的关系不如文本的呈现。那是我更大的问题。不过还是谢谢你看一下。感谢您的帮助。