我试图通过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加载的元素?
谢谢!
发布于 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');
发布于 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();
}
});
}
在上面的代码中,我们所做的是在ajax调用完成后再次初始化get_width
方法,以便get_width
也可以访问新创建的元素。
https://stackoverflow.com/questions/14291294
复制相似问题