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 调用之前初始化的方法将无法访问动态创建的元素。为此，您可以在completeajax 调用的方法中再次初始化 bind 方法。下面是一个例子：

示例 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方法将无法访问<li>通过 ajax（动态）添加的新项目，因为在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 回答