0

私は助けが必要です。間違いが見つかりません。何らかの理由で、ulを追加するとliが重複します。キーアップ時に結果を検索するAJAX検索を作成しました。問題は、たとえばプロフィールをクリックして戻ってきた場合など、ページを離れたときに同じキーワードを検索すると、結果が重複することです。何かを入力する前にulをempty（）するので、これは非常に奇妙です。これは非常に単純なことかもしれませんが、見つかりません。

これが私のulを追加する私のjQueryです：

    $(document).delegate("#search", "pageshow", function() {
        $("#search input").focus(function() {
            $("ul#search_list").empty();
            $(this).val("");
            localStorage.search = "";
        });
        $("#search input").keyup(function() {
            $("ul#search_list").empty();
            localStorage.search = $("#search input").val();
            var result = "";
            $.ajax({
                url: '/app/users/search/'+localStorage.search,
                dataType: 'jsonp',
                jsonp: 'jsoncallback',
                success: function(data) {
                    $.each(data, function(i,item){
                        var result = '<li><a href="#friend_profile" class="friend_profile" data-search_user_id="'
                        + item.id +
                        '"><img class="round" src="'
                        + item.picture + '" /><h3>'
                        + item.name + 
                        '</h3><p>' + item.location + '</p></a></li>';
                        $("ul#search_list").append(result);
                        $("ul#search_list").listview('refresh');
                    });
                },
                error: function(){
                    $("ul#relationships_list").text('Sorry, you dont seem to have any friends.');
                }
            });
        });
    });

追加されるHTMLulは次のとおりです。

    <div data-role="page" id="search">

            <div data-role="header" data-position="fixed">
                <a data-rel="back">Back</a>
                <h1>Search</h1>
                <a href="index.html">Settings</a>
            </div><!-- /header -->

            <div data-role="content"> 
                <ul id="search_list" data-role="listview" data-filter="true">
                </ul>                 
            </div><!-- /content -->

            <div data-role="footer" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#dash" data-icon="grid">Dash</a></li>
                        <li><a href="#points" data-icon="star">Points</a></li>
                        <li><a href="#claim" data-icon="check">Claim</a></li>
                        <li><a href="#search" data-icon="search" class="ui-btn-active ui-state-persist">Search</a></li>
                        <li><a href="#profile" data-icon="home">Profile</a></li>
                    </ul>    
                </div>
            </div><!-- /content -->

        </div><!-- /page -->

これが表示されるもののスクリーンショットです。ビジュアルが必要な場合：

iPhoneシミュレーションjQueryMobile

みんな、ありがとう！

4

2 に答える 2

0

ページ非表示で結果をクリアしたときに、この問題が発生しました。使用しているJQueryMobileのバージョンはわかりませんが、1.0でこの問題が発生しました。ajaxイベントはページハイドのページを破壊していないようです。そのため、ページハイドの要素を削除する必要がありました。これが役立つかどうかはわかりません。

于 2012-05-01T15:28:06.007 に答える
0

これらのオプションはどれも機能しませんでした。しかし、ul内の重複を削除する簡単な修正を見つけました。これまでに機能したのはそれだけです。ソリューションへのリンクは次のとおりです。

jqueryは重複するliを削除します

于 2012-05-05T20:48:38.537 に答える