Почему содержимое моей вкладки не освежает?

Question

У меня есть страница с несколькими вкладками. Когда пользователь вводит значение в текстовый ввод, а затем сбрасывает кнопку, я хочу заменить содержимое на определенной вкладке. У меня есть этот код (некоторые детали приведены, чтобы показать только подходящие части/объяснить, что я делаю).

Он отлично работает в первый раз - вкладка загружается просто отлично; последующие нажатий кнопки (после изменения значения ввода текста) не имеет никакого эффекта. Почему нет? Что я должен сделать, чтобы заставить вкладку «обновить»? Что-то эквивалентное, возможно, для «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> 

Answer 1

Вы пропустили # в $("duckbilledPlatypusTab-YouTube").html("");. На самом деле ваш код не удаляет вкладку «YouTube», поэтому все новые видео добавляются в конце контейнера.
Исправить это, чтобы $("#duckbilledPlatypusTab-YouTube").html(""); должен решить вашу проблему.

См. Также short demo.
(В принципе, все, что я сделал, это взять ваш код и добавить его в список #.)