0

<ul>リスト内のすべての子を循環させ、イベント リスナーを割り当て、onclickそのイベントの要素の ID を使用しようとしています。アプリケーションで jQuery と jQueryMobile を使用しています。何らかの理由で、要素の ID プロパティは常に空白で表示されますか? 実際の要素にアラートを出すと、[ObjectHTMLLIElement]. DevTools を使用すると、ID フィールドはすべての要素に表示されますか?

これはリストビューです

これが私がこれを達成しようとしている方法です...

function set_onclicks()
{
    var count = $('#main-listview').children().length;
    if (count > 0)
    {
        $('#main-listview').children().each(function() {
            this.onclick = function() {
                project_id = this.id;
                $.mobile.changePage('#main-project-page', 'slide', true, true);
            }
        });
    }
}

誰かが私を正しい方向に向けて、ID を取得できない理由を説明できますか? 助けてくれてありがとう！

ネイサン

最近の編集

.each()ループを介してバインドする必要がないことがわかったので、これを実装しようとしました。

$('#main-listview').children().click(function() {
    alert(this);
    alert(this.id);
    project_id = this.id;
    $.mobile.changePage('#main-project-page', 'slide', true, true);
});

最初のアラート[ object HTTMLLIElement ]で、次のアラートで空白になる...?

編集 2 - HTML の例 理由はわかったと思います。jQueryMobile は、リンク<div>を追加する前にいくつかの要素を追加しています。<a>今、私はこれを回避する方法を見つけなければならない..

<ul data-role="listview" data-inset="true" data-filter="true" data-filter-theme="a" id="main-listview" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
    <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-first-child ui-btn-up-a">
        <div class="ui-btn-inner ui-li">
            <div class="ui-btn-text">
                <a id="51e0278f2a1cb33a08000002" class="ui-link-inherit">123456 - The Project</a>
            </div>
            <span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span>
        </div>
    </li>
</ul>
4

2 に答える 2

1

オブジェクトthisでバインドしない限りできないjavascriptイベントハンドラーでアクセスしようとしていますjQuery

変化する

this.onclick = function() {
            project_id = this.id;
            $.mobile.changePage('#main-project-page', 'slide', true, true);
        }

に

$(this).click( function() {
            project_id = this.id;
            $.mobile.changePage('#main-project-page', 'slide', true, true);
});

簡単な解決策jquery のおかげでバインド前にセレクターによって要素が返されたかどうかを確認する必要がなくなり、バインド イベントにそれぞれを使用する必要がなくなりました。

$('#main-listview').click(function() {           
   project_id = this.id;
   $.mobile.changePage('#main-project-page', 'slide', true, true);          
});
于 2013-07-25T12:14:53.747 に答える
1

クリックイベントを設定するために関数を使用している理由がわかりません..（ループ$.eachを使用して各要素のクリックイベントを設定する必要はありません）。

これだけでうまくいくはずです

  $('#main-listview').children().click(function() {
             project_id = this.id;
            $.mobile.changePage('#main-project-page', 'slide', true, true);
        }
    });
于 2013-07-25T12:16:03.440 に答える