首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >jQuery如何绑定通过AJAX添加的元素

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

Stack Overflow用户
提问于 2013-01-12 07:29:09
回答 2查看 495关注 0票数 0

我试图通过jQuery获取列表中所有元素的宽度,但我不确定如何绑定它,它将从AJAX加载的内容中读取它。

以下是我的代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 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加载的元素?

谢谢!

EN

回答 2

Stack Overflow用户

回答已采纳

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

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$('body').on('click', 'ul > li', function(e) {
  console.log('clicked');
});

但是,如果您只需要元素的宽度(如您的问题所示),则不需要使用.on()进行绑定。当您检查元素的宽度时,您只需要确保元素存在。最好的方法是在加载内容的AJAX请求的success回调中运行代码。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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
EN

Stack Overflow用户

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

jQuery适用于DOM元素。这些方法主要在文档就绪后运行(在所谓的$( document ),ready()方法中)。因此,在ajax调用之前初始化的方法将无法访问动态创建的元素。要实现这一点,可以在ajax调用的complete方法中再次初始化绑定方法。下面是一个示例:

例1:这是行不通的。

HTML

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>
<button onclick="get_ajax_data();">Get Data</button>

jquery

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$(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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>
<button onclick="get_ajax_data();">Get Data</button>

jquery

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$(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也可以访问新创建的元素。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/14291294

复制
相关文章
如何通过jQuery发送AJAX?
contentType:发生请求时的内容编码类型(application/x-www-form-urlencoded)
切图仔
2022/09/08
1.2K0
jQuery 查找on事件绑定元素的被绑定元素方法
如上代码,当我点击这个图片的时候 $(this) 是指 img . 当然这是正确的.
FungLeo
2022/05/05
4.5K0
jquery获取元素绑定的事件
一个简单的记录,在调试jquery的事件绑定时会用到。查看某元素是否绑定上了事件。
the5fire
2019/02/28
4.2K0
jQuery - 添加元素
jQuery append() 方法在被选元素的结尾插入内容(仍然在该元素的内部)。
陈不成i
2021/07/22
2.6K0
jQuery ajax - ajax() 方法jQuery ajax - ajax() 方法
http://www.w3school.com.cn/jquery/ajax_ajax.asp
一个会写诗的程序员
2018/08/17
14.5K0
[WCF安全系列]通过绑定元素看各种绑定对消息保护的实现
对消息进行签名和加密分别解决了消息的一致性和机密性问题。而最终是仅仅采用签名还是签名与加密共用取决于契约中对消息保护级别的设置。但是具体的签名和加密在整个WCF框架体系中如何实现?是采用对称加密还是非对称加密?密钥如何而来?相信这些问题在本篇文章中你会找到答案。 目录 一、BasicHttpBinding 二、WSHttpBinding、WS2007HttpBinding和WSDualHttpBinding 三、NetTcpBinding和NetNamed
蒋金楠
2018/01/16
6470
动态添加的html元素绑定事件的方法
在js中写好方法名对应的方法就可以了,如果绑定方法的元素太多,可以考虑使用方法二;
蓓蕾心晴
2018/07/24
3.5K0
jquery ajax步骤,jquery ajax(ajax请求的五个步骤jQuery)
AJAX是与服务器交流数据的艺术,它在不重载全部页面的情况下,完成了对部分网页的更新。
全栈程序员站长
2022/08/29
1.7K0
jquery ajax步骤,jquery ajax(ajax请求的五个步骤jQuery)
jQuery动态添加/删除元素及内容
添加新的 HTML 内容,四种方法:可根据上面的图片来区分四种方法插入元素的位置。
德顺
2019/11/12
7.1K0
使用jQuery.data()查看元素上绑定的事件
最近遇到一个诡异的问题,发现我添加在一个HTMLElement片段上面的事件绑定,会在后续的流程中,无故丢失了。但是,我不知道它是什么时候丢失的。
libo1106
2018/08/08
1.9K0
cssjshtml jquery向动态生成的元素添加事件
delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
葫芦
2019/04/17
3.1K0
jQuery的ajax
今天公司实习生问我jQuery的ajax怎么写,这玩意不是很简单吗 $.ajax({ url: "/cowBeer", //url method: "post", //请求方式 contentType: "application/json", //参数类型 data: JSON.stringify({ //这里面是参数 "name":"cowBeer"
阿超
2022/08/16
6970
jQuery通过Ajax实现请求后台接口数据
<script> $(function () { $.ajax({ url: " https://xx.php", type: "post", data: data, dataType: 'json', success: (res) => { }, error: (err) => { }
明知山
2020/09/03
1.5K0
【Ajax】如何通过axios发起Ajax请求
✍️ 作者简介: 前端新手学习中。 💂 作者主页: 作者主页查看更多前端教学 🎓 专栏分享:css重难点教学 Node.js教学 从头开始学习 ajax学习 文章目录 axios   什么是axios   axios发起GET请求   axios发起POST请求   直接使用axios发起get请求   直接使用axios发起post请求 axios   什么是axios Axios是专注于网络数据请求的库,相比于原生的XMLHttpRequest对象,axios简单易用。相比于
坚毅的小解同志的前端社区
2022/11/28
1.7K0
【Ajax】如何通过axios发起Ajax请求
jQuery ajax - ajax()方法
什么是 AJAX? AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
江一铭
2022/06/17
9.4K0
jQuery Ajax
AJAX简介 AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新。 AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScr
静默虚空
2018/01/05
1.1K0
jquery ajax
ajax技术的目的是让javascript发送http请求,与后台通信,获取数据和信息。ajax技术的原理是实例化xmlhttp对象,使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行,从而实现异步。
Devops海洋的渔夫
2019/05/30
1.3K0
jquery ajax
image.png
用户5760343
2022/05/13
1K0
jquery ajax
ASP.NET Core通过jQuery Ajax发送AntiForgeryToken
在ASP.NET Core中,如我我们希望用jQuery Ajax向服务器提交数据,并希望使用ValidateAntiForgeryToken标记,我们需要一些技巧。官方文档并没有说如何使用jQuery完成这个操作,我来演示给大家看看。
Edi Wang
2019/07/08
1.6K0
jQuery的ajax详解
jQuery内部也封装了对原生ajax请求的方法,可以很方便我们的对后台异步请求处理。
老马
2018/07/31
2.3K0

相似问题

jQuery -如何为ajax添加的元素调用/绑定jquery事件?

13

jQuery检测通过ajax添加的元素

10

如何让jQuery将事件绑定到通过Ajax加载的元素?

50

通过jQuery ajax绑定GridView

30

jquery绑定ajax加载的元素

10
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文