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

Stack Overflow用户

提问于 2013-01-12 07:29:09

回答 2查看 495关注 0票数 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加载的元素？

谢谢!

jquery

ajax

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-01-12 07:45:37

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

因此，请注意，如果您想要附加一个单击事件侦听器，您应该绑定一个在DOM就绪时确实存在的元素(例如。body)。

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

票数 0

Stack Overflow用户

发布于 2013-01-12 07:56:17

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