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 （基本上，我所做的就是接受你的代码并添加缺少的#。）

为什么我的标签内容没有刷新？

1 个答案: