0

jQuery を使用してリスト内のすべての要素の幅を取得しようとしていますが、AJAX で読み込まれたコンテンツから読み取る場所にバインドする方法がわかりません。

これが私のコードです

// below html is loaded via AJAX
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>

var width;
$('ul li').each(function() {
width = (width + $(this).outerWidth());
});

console.log(width);

では、このコードから、AJAX 経由でロードされる要素に「バインド/リッスン」するように変更するにはどうすればよいでしょうか?

ありがとう！

4

2 に答える 2

0

動的に読み込まれる要素にイベントをバインドする場合は、.on()メソッドを使用する必要があります。ページの読み込み時にイベント リスナーがバインドされるためです。その時点で要素が存在しない場合、jQuery はイベント リスナーをアタッチできません。

したがって、クリックイベントリスナーをアタッチしたい場合は、DOM の準備が整った時点で存在することが確実な要素 (たとえばbody) をバインドします。

$('body').on('click', 'ul > li', function(e) {
  console.log('clicked');
});

ただし、（質問のように）要素の幅だけが必要な場合は、を使用してバインドする必要はありません.on()。要素の幅を確認するときに要素が存在することを確認する必要があります。successこれを行う最善の方法は、コンテンツに読み込まれる AJAX 要求のコールバックでコードを実行することです。

var width = 0;

$.get('example.php', function(data) {
   // this is the success callback

   // first add the new data to the document
   $('#someTarget').append(data);

   // you can now query for their width since they now exist
   $('ul li').each(function() {
      width += $(this).outerWidth();
   });

   console.log(width);
}, 'html');
于 2013-01-12T07:45:36.877 に答える
0

jQuery は DOM 要素で動作します。これらのメソッドは、ほとんどの場合、ドキュメントの準備が整うと実行されます(いわゆる $(document),ready() メソッド内)。したがって、ajax 呼び出しの前に初期化されるメソッドは、動的に作成された要素にアクセスできません。completeこれを実現するには、ajax 呼び出しのメソッド内でバインド メソッドを再度初期化します。次に例を示します。

例 1 : これは機能しません。

HTML

<ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>
<button onclick="get_ajax_data();">Get Data</button>

jquery

$(document).ready(function(){
    get_width();
    get_ajax_data();
});

function get_width(){
    # some code to get the width;
}

function get_ajax_data(){
    $.ajax({
        # Some code to get data from the ajax call
        # and then append it as a <li> to the <ul>
    });
}

上記の例では、ボタンをクリックしてデータを取得すると、メソッドが初期化された時点でその要素が存在しなかったため、メソッドは ajax を介して (動的に) 追加されget_widthた新しい項目にアクセスできません。したがって、次のようにする必要があります。<li>get_width<li>

例 2: これでうまくいきます。

HTML

<ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>
<button onclick="get_ajax_data();">Get Data</button>

jquery

$(document).ready(function(){
    get_ajax_data();
});

function get_width(){
    # some code to get the width;
}

function get_ajax_data(){
    $.ajax({
        # Some code to get data from the ajax call
        # and then append it as a <li> to the <ul>
        complete: function(){
            get_width();
        }
    });
}

get_width上記で行ったことは、ajax 呼び出しが完了した後にメソッドを再度初期化しget_widthて、新しく作成された要素にもアクセスできるようにすることでした。

于 2013-01-12T07:56:16.833 に答える