jQuery如何绑定通过AJAX添加的元素

Question

我试图通过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加载的元素？

谢谢！

Answer 1

当您在动态加载的元素上绑定事件时，您需要使用.on()方法，因为事件侦听器在页面加载时被绑定，并且如果您的元素在那时不存在，那么jQuery无法附加事件侦听器。

所以，在你关心的时候，如果你想附加一个click事件监听器，你就可以绑定一个你确定在DOM准备就绪时存在的元素（例如。body）。 / p>

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

但是，如果您只想要元素的宽度（如问题所示），则无需使用.on()进行绑定。您只需要在检查宽度时确保元素存在。执行此操作的最佳方法是在加载内容的AJAX请求的success回调中运行代码。

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');

Answer 2

jQuery适用于DOM元素。这些方法主要在文档准备就绪后运行（在所谓的$（document），ready（）方法中）。因此，在ajax调用之前初始化的方法将无法访问动态创建的元素。要实现此目的，您可以在ajax调用的complete方法中再次初始化绑定方法。以下是一个例子：

示例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>
    });
}

在上面的示例中，如果单击按钮获取数据，get_width方法将无法访问通过ajax（动态）添加的新<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();
        }
    });
}

在上面我们做的是在完成ajax调用之后再次初始化get_width方法，以便get_width也可以访问新创建的元素。