使用jQuery設置事件回調中的元素值

看起來我可能已經找到了IE相關的jQuery bug。創建了一個小測試（包括在這裏），我可以解決這個問題。在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>

來源

2011-04-06 Rey Bango

哇，我甚至沒有注意到在第一次提問是誰 - 嗨雷伊！今晚有一杯好水？ ;） – JAAulde 2011-04-06 04:08:19

呵呵。你好，吉姆。:) – 2011-04-07 12:41:05

你的榜樣代碼會導致div將文本更改爲'Prev'或'Next'並顯示。然後它會調用一個函數，使同一個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(); 
    });

來源

2011-04-06 03:59:32 JAAulde

感謝您的幫助球員。問題似乎與IE調試器沒有重新繪製您正在瀏覽的文本相關。使用setTimeout，現在它的作用是與@JAAulde提到的同步。 – 2011-04-06 04:12:41

我想我在用Visual Web Developer 2010 Express調試IE時遇到了同樣的問題。很高興你解決了它！ – JAAulde 2011-04-06 04:29:09

謝謝。非常感謝您的反饋和幫助。 :) – 2011-04-06 05:03:24

Internet Explorer不支持target財產。相反，微軟發明了srcElement。

如果你檢查的target存在，並退回到srcElement，您的代碼應工作：

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

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

來源

2011-04-06 03:49:19 Blender

IE認可的目標，因爲jQuery標準化事件模型。所以代碼工作正常。它與文本的呈現沒有多大關係。這是我的大問題。謝謝你看看它。我很感激幫助。 – 2011-04-06 04:23:01

使用jQuery設置事件回調中的元素值

回答

相關問題