2013-05-18 22 views
0

我有一個頁面上有幾個標籤。當用戶在文本輸入中輸入一個值,然後對按鈕進行混合時,我想要替換特定選項卡上的內容。我有這個代碼(其中一些細節只是顯示相關部分/解釋我在做什麼)。爲什麼我的標籤內容不清爽?

它第一次運作良好 - 標籤加載得很好; 後續點擊按鈕(更改文本輸入值後)不起作用,但。爲什麼不?我必須做些什麼來強制標籤「刷新」?可能與桌面環境中的「Application.ProcessMessages()」等價嗎?

下面是相關的HTML:

<input type="text" name="inputText" id="inputText" placeholder="Enter something" autofocus style="display: inline-block;" /> 
<input type="button" name="inputButton" id="inputButton" value="Find" style="display: inline-block;" /> 

...和jQuery:

<script> 
    $.support.cors = true; 
    $(document).ready(function() { 
     $("#duckbilledPlatypusTabs").tabs({ 
     }); 

     $("#inputButton").click(function (e) { 
       var searchTerm = ""; 
       if ($("#inputText").val() !== "") { 
        searchTerm = $("#inputText").val(); 
       } else { 
        searchTerm = "jQuery"; 
       } 
       //alert(searchTerm); 
       $("duckbilledPlatypusTab-YouTube").html(""); 

       var urlYouTube = "http://gdata.youtube.com/feeds/api/videos?vq=" + searchTerm + "&max-results=5&orderby=published&alt=json"; 

       $.getJSON(urlYouTube, function (data) { 
        // Loop through each feed entry 
        $.each(data.feed.entry, function(i, item) { 
         // Get the URL for the video 
         var url = item.link[0].href; 
         // Get the title of the video 
         var title = item.title.$t; 
         // Get the first 10 characters of date video was published or: YYYY-MM-DD 
         var datepublished = item.published.$t.substring(0, 10); 
         // Get the author name 
         var author = item.author[0].name.$t; 
         // Get the thumbnail image for the video 
         var thumbnailURL = item.media$group.media$thumbnail[0].url; 
         // Construct the display for the video 
         var text = 
          "<br><a href='" + url + "'>" + title + "</a><br>" + 
           "Published: " + datepublished + " by " + author + "<br><br>" + 
           "<img src='" + thumbnailURL + "'><br>"; 
         // Append the text string to the div for display 
         $("#duckbilledPlatypusTab-YouTube").append(text); 
        }); 
       }); 
     });  
    }); 
</script> 

回答

1

您在$("duckbilledPlatypusTab-YouTube").html("");錯過了#。實際上,您的代碼未能清除「YouTube」標籤,因此所有新視頻都會添加到容器的末尾。
更正至$("#duckbilledPlatypusTab-YouTube").html("");應解決您的問題。

另外,參見short demo
(基本上,我所做的就是把你的代碼,並添加這個缺少#