0

親要素も ajax で読み込まれた ajax コンテンツでトリガーされるイベントを取得しようとしています。

<div id="content"><!-- NOT ajax-loaded -->
    <div id="location"> <!-- #location IS ajax-loaded -->
        <div id="add_location> <!-- #add_location IS ajax-loaded from a #location event -->

            <input type="text" id="add_location_city_example" />
            <input type="text" id="add_location_state_example" />

            <input type="submit" id="add_location_confirm" />

       </div>
    </div>
</div>


$(function(){
  $('#content').on('click', '#add_location_confirm', function(){
    console.log('debug 1');
    add_location();
    // will not be called
  });

  $('#location').on('click', '#add_location_confirm', function() {
      console.log('debug 2');
      // will not be called either
      add_location();
  });
});

onclick="add_location()" と function add_location() { console.log('debug 3); がある場合 私の .js では、明らかに呼び出されますが、DOM に含まれないため、 $('#add_location_city_example').val() を取得できません。

注: 1.9.1 を使用

4

1 に答える 1

0

私はこれをしばらく使用してきましたが、あなたが説明しているような状況をより簡単に処理できます + 将来ページに表示される要素を含め、ページ上のほぼすべてのクリックに対して偶数の割り当てが 1 つしかありません:

$(document).bind('click', function (e) {
   var target = $(e.target);
   if (target.is('#content')) {
      e.preventDefault();
      // do whatever
   } else if (target.is('#location')) {
      e.preventDefault();
      // do whatever else
   }
});

またはあなたの場合、おそらく次のようになります：

$(document).bind('click', function (e) {
   var target = $(e.target);
   if (target.is('#add_location_confirm')) {
      e.preventDefault();
      if (target.closest('#location').length == 0) { // not yet have location injected via ajax
          // do something
      } else {
          // location has been injected, do something else
      }
});
于 2013-03-08T01:46:56.860 に答える