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>
4

1 に答える 1

1

の を逃しまし#た$("duckbilledPlatypusTab-YouTube").html("");。実際、あなたのコードは「YouTube」タブをクリアできないため、すべての新しい動画がコンテナの最後に追加されます。
それを修正すると$("#duckbilledPlatypusTab-YouTube").html("");、問題が解決するはずです。

この短いデモも参照してください。
(基本的に、私がしたことは、あなたのコードを取得して、この行方不明を追加することだけでした#。)

于 2013-05-18T20:10:06.033 に答える