ajax - .on('click') 带有来自另一个 ajax 内容的 ajax 内容

Question

尝试使用 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()" 和函数 add_location() { console.log('debug 3); } 在我的 .js 中，那么它显然会被调用，但是我无法得到 $('#add_location_city_example').val() 因为它都不会在 dom 中。

注意：使用 1.9.1

Answer 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
      }
});