开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在$ .AJAX加载的HTML上使用Jquery选择器？

在$ .AJAX加载的HTML上使用Jquery选择器，可以使用事件委托的方式来实现。事件委托是指将事件监听器添加到一个父元素上，而不是直接添加到具体的元素上。这样，即使新添加的元素没有事件监听器，也可以在事件冒泡到父元素时触发事件处理函数。

例如，假设我们有一个HTML文件，其中包含一个按钮，点击该按钮后，会通过AJAX加载一个新的HTML文件，并将其插入到页面中。我们希望在新加载的HTML中的所有按钮上添加事件监听器。

<!DOCTYPE html>
<html>
<head>
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 <button id="load-button">加载HTML</button>
  <div id="content"></div>

 <script>
    $(document).ready(function() {
      // 给按钮添加事件监听器
      $('#load-button').click(function() {
        // 通过AJAX加载HTML文件
        $.ajax({
          url: 'new-content.html',
          success: function(data) {
            // 将新的HTML插入到页面中
            $('#content').html(data);

            // 给新的HTML中的所有按钮添加事件监听器
            $('#content').on('click', 'button', function() {
              alert('按钮被点击');
            });
          }
        });
      });
    });
  </script>
</body>
</html>

在上面的例子中，我们使用$('#content').on('click', 'button', function() {...});来给新加载的HTML中的所有按钮添加事件监听器。这样，即使新添加的按钮没有事件监听器，也可以在点击时触发事件处理函数。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

HTML5中类jQuery选择器querySelector的使用

简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素，功能类似于jQuery的选择器...用法两个方法使用差不多的语法，都是接收一个字符串参数，这个参数需要是合法的CSS选择语法。...querySelector 该方法返回满足条件的单个元素。按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找，返回第一个满足条件的元素。...同样，在提供给querySelector和querySelectorAll的参数也支持转义，了解这点非常重要。...原因就在于反斜杠在字符串中本身就表示转义的意思，它于冒号结合转不出东西来，于是抛错。

3.2K7 0

jQuery封装的AJAX使用

jQuery 中的 Ajax jQuery为我们提供了更强大的Ajax封装 $.ajax({}) 可配置方式发起Ajax请求 $.get() 以GET方式发起Ajax请求 $.post() 以POST方式发起...Ajax介绍 http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp jQuery 中的 Ajax url: 要求为String类型的参数，（默认为当前页地址...可用的类型如下： xml：返回XML文档，可用JQuery处理。 html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。 script：返回纯文本JavaScript代码。...在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。...(html); } }); }); }); jQuery 中 Ajax 的使用 $.ajax({ type : 'get',

2.9K6 0

阻止HTML表单提交跳转页面，使用 Jquery Ajax 请求接口

HTML 表单 ---- <form...serializeArray(); $.each(array, function() { formData[this.name] = this.value; }); console.log(formData) $.ajax

3K2 0

python的jQuery-Ajax使用

DOCTYPE html> <script src=".....,val获取标签<em>的</em>值 var name = $('#name').val() var age = $('#age').val() // console.log把数据打印<em>在</em>控制台... console.log(name) console.log(age) // 发起<em>Ajax</em>请求 $.<em>ajax</em>({ url:'/ax

9813 0

jquery中ajax的使用(java)

AJAX方式 js:界面 var prjContextPath=''; $(document).ready(function(){...= ""; if (flag) { html = "{\"success\":1,\"msg\":\"用户名，可以使用！...\"}"; } else { html = "{\"success\":0,\"msg\":\"用户名，不可以使用！...\"}"; } // 调用BaseAction中的方法向输出流中写JSON串 responseWriterJSON(html); } BaseAction...query(); }); //-----------对用户名进行查询end------------------------------------------- //加载查询土地登记审批表

1.4K3 0

使用jQuery的.on方法解决ajax增加的html元素获取不到的问题

下班之前终于搞定了使用$.ajax增加的动态元素获取不到的问题，原来是使用.on方法（老版本是.live），这里记录一下，顺便赞一下jQuery，通过使用getJSON,.append,.empty等，...唯一的一点就是版本太多了，最新版本支持的浏览器对于中国用户来说是个噩梦。...我是用法 $('#parent').on("click", "#child", function() {});//#parent是非ajax方式生成的，#child是ajax回来的数据...append到#parent的我的代码 $('#taskComments').on("mouseenter", "#taskComment", function(){

1.8K2 0

jQuery中属性选择器的使用

DOCTYPE html> 属性选择器的使用获取属性值包涵it的对象获取属性值包涵www的对象并且title包含"是"的对象 $(document).ready(function () { $("button").eq(0).click(function...="www"][title*="是"]').css({ // 'color':'red' // }); // }); }) 效果展示如下：图的顺序为以上代码的按钮的顺序结果。

2.4K2 0

使用Jquery的$.ajax 解决csrf问题

CSRF问题 csrf也就是laravel默认在表单提交中都会验证csrf字串，没有的话就不会予以通过。当然，你在普通的表单中加一个@csrf，系统就会自动增加一个hidden隐藏域。...或者你用laravel自带的axios，laravel也做过处理： resources/js/bootstrap.js ? 那么如果我使用jquery封装的ajax，如何处理呢？...('content') } }); 但是，就要求在meta中有一个_token的值，也即需要： ...那么，也就可以请求ajax了。...中增加一个名为XSRF-TOKEN的Cookie，我们直接获取他的值就行啦。

2.8K0 0

解决innerHtml 在Jquery上使用无效果的问题

").innerHTML = "加载本页耗时 "+ (new Date().getTime()-t1) +" 毫秒"; 或使用Jquery的方式： $("#timeShow").html('加载本页耗时...' + loadTime + 'ms'); innerHTML在JQuery中使用的话是无效果的， JQuery提供了三种方法实现指定标签赋内容:.html(),.val(),.text()。...三种方法区别具体： .html()用为读取和修改元素的HTML标签对应js中的innerHTML .html()是用来读取元素的HTML内容（包括其Html标签）, .html()方法使用在多个元素上时...对应js中的innerText text()用来读取元素的纯文本内容，包括其后代元素;.text()方法不能使用在表单元素上 .val()用来读取或修改表单元素的value值 .val()是用来读取表单元素的..."value"值,.val()只能使用在表单元素上关于三者的区别 .val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样

3621 0

jQuery介绍与常见选择器的使用

jQuery独特的选择器、链式操作、事件处理机制和封装完善的AJAX都是其他JavaScript库望尘莫及的。...jQuery将所有的AJAX操作封装到一个函数$.ajax()里，使得开发者处理AJAX的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。...使用jQuery的选择器 在开始使用jQuery之前，首先应该明确一点，在jQuery库中，\就是jQuery的一个简写形式，例如\("#foo") 等价于 jQuery("#foo")，\.ajax...传入标签的id值，然后在值的前面加上 # （与css中的选择器命名一样）即可，无论css中是否有定义该id选择器都可以这么使用，示例：运行结果： hello hello1 hello2 hello3 hello4 以上只是演示的了一些常见的选择器使用方式，其他的选择器使用方式可以参考以下jQuery的中文文档

2.7K1 0

使用jQuery的ajax同步请求吃过的亏

jQuery是一个很常用的js库。甚至我们开发任何一个项目都首先把jquery导入进行。jQuery太过强大，使用起来非常方便。...但是在使用的过程中也遇到过很多坑。我在这里分享一下，避免大家也遇到同样的问题束手无策，也方便以后回归学习。...普通的写法: $.ajax({ url:url, type:'POST', async:false, data:{ id:1 }, dataType:'json', timeout:...2.dataType这个属性必须和返回的响应内容对应。...具体使用查看http://jquery.cuishifeng.cn/jQuery.Ajax.html在线api

1.5K3 0

jQuery，和嵌入其中的Ajax

库是一个 JavaScript 文件，您可以使用 HTML 的标签引用它： jQuery 语法 jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。...页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML中发生某些事件时所调用的方法。实例：在元素上移动鼠标。...jQuery 选择器 jQuery选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML元素。...页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。实例：在元素上移动鼠标。...通过 jQuery AJAX 方法，您能够使用HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML或JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

3.1K2 0

js与jQuery的区别以及jQuery选择器和方法的使用

目录使用jQuery js与jQuery代码对比 jQuery选择器：用来选中元素基本方法 ---- js与jQuery代码对比 jQuery选择器：用来选中元素基本方法使用jQuery jQuery...官网：http://jquery.com/ 为什么要学jQuery：可以简化JavaScript开发，jQuery中包含有：选择器，CSS样式，HTML事件处理，JS动画以及丰富的插件等等，而且浏览器兼容性很高...选择器还可以组合多个一起使用，可以分为并集和交集。...所有的p 和 span 不管是在div内的还是在div外边的全部受到影响。这种写法我们叫做多个选择器 并集。多个选择器(交集)：selector1 selector2 那么有并集应该也会有交集。...我们以后统一用：confole.info(sex);然后在页面按F12选中控制台看输出结果多选按钮：多选按钮和单选按钮呢基本上是一样的，来我们对比着上面的写一下试试。

15.3K1 0

JQuery的简述、使用方法和选择器

JQ简述1 1、 jQuery出现的背景(Javascript遇到的问题) 选择器功能弱 DOM操作繁琐之极浏览器兼容性不好动画效果弱 2、什么是 jQuery(概念) jQuery...除非特殊要求，一般不会使用 3.x 版本的，很多老的 jQuery 插件不支持这个版本。目前该版本是官方主要更新维护的版本。注：推荐学习时使用1.x版本，功能更加完善，所学习到的东西更多。...(…….); 作用 2：$(selector) 选择器 jQuery具有强大的选择器功能 ?...使用前的准备 ? JQ中常用的选择器 一、基本选择器 1、id选择器通过元素id获取相关元素 ? 2、元素选择器 获得body内的相关元素，如div、input等 ?...使用时直接将相关jquery文件放入JS目录下，在html代码中引入即可。

1.1K1 0

JavaEE 使用 JQuery 完成 ajax & json 数据的传输

JavaEE + Ajax处理 json 数据一、项目准备二、编写前端表单界面 2.1 html 部分 2.2 js 部分（ajax 编写）三、后端请求处理 3.1 mysql 建表 3.2 编写...需要用到 jquery库，bootstrap 库（非必要），JSONobj 的六个必要的库，mysql 驱动 JSONobj 需要的同学，需要 mysql 驱动的，我已经上传至 Github，里面也整理了一些我学习会常用到的...jar包 Jar 包下载链接二、编写前端表单界面 2.1 html 部分这里使用了 BootStrap， jquery 库 2.2 js 部分（ajax 编写）我使用 JQuery 来完成 ajax 请求的部分 $("button").on('click',function () { // 获取用户在输入框中...ArrayList 存储查出来的学生，在使用 JSONobj 把 ArrayList 集合转换成 JSON 格式，这样才方便返回到前端，并且显示数据。

1.6K2 0

jQuery 教程

页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。实例：在元素上移动鼠标。...简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。...您可以在我们的 jQuery Ajax 参考手册学会 jQuery Ajax 的具体应用。您可以在我们的 AJAX 教程中学到更多有关 AJAX 的知识。...通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON – 同时您能够把这些外部数据直接载入网页的被选元素中。...的 HTTP GET 请求从服务器加载数据 $.getJSON() 使用 HTTP GET 请求从服务器加载 JSON 编码的数据 $.getScript() 使用 AJAX 的 HTTP GET 请求从服务器加载并执行

17K2 0

jQuery的编码标准和最佳实践

加载jQuery 1. 尽量在页面上使用CDN来加载jQuery。...当你加载来自CDN上的jQuery时，你要指定你要加载的jQuery的完整版本号(像　　1.11.0不要写成1.11或者1)。不要加载多个不同版本的jQuery。 6. ...所有用来存储/缓存jQuery对象的变量的名字应该有一个前缀$。 2. 在变量中缓存jQuery选择器返回的内容以便重用。...在使用ID时不要指定多个ID，ID选择器是通过document.getElementById()处理的，所以不要和其他的选择符混着使用。...使用事件代理来将事件绑定到使用Ajax加载的内容上，事件代理在异步加载上有优势，它可以处理来自过一段时间之后加载到文档中的后代元素的事件。

1K2 0

python 学习第八篇 jquery

使用 Google 的 CDN 4:jQuery的基本三步走 1：选择器——找到需要操作的元素...） 3：事件——什么情况下触发jQuery的操作， ajax等例子：在login.html中引用jquery ?...在console中输入 $('#loginform').serialize() 作用是把表单中的所有值都拿到 $：表示jquery loginform：表示选择器 id：...是html元素的唯一标识，同一个页面中不能出现重名的id jquery基础语法： $(selector).action() $(选择器).动作常用的动作 1：$(选择器).html(value)

9322 0

在el-table上使用无限滚动加载

prop="address" label="地址"> <el-alert v-if="isflag" title="正在努力<em>加载</em>中

3.8K1 0

【jquery Ajax】接口的学习与Postcode插件的使用

安装Postcode 使用postcode测试get接口使用postcode测试post接口接口文档 ...什么是接口文档接口文档的组成部分接口文档示例 ---- 接口接口的概念使用Ajax请求数据时，被请求的url地址...接口测试工具能让我们在不写任何代码的情况下，对接口进行调用和测试。 ...安装失败的话，会提示手动安装，手动安装再导入也可以，使用postcode测试get接口步骤选择请求的方式填写请求的URL地址填写请求的参数点击Send按钮发起...使用postcode测试post接口步骤选择请求的方式填写请求的URL地址选择Body面板并勾选数据格式填写要发送到服务器的数据点击Send按钮发起POST请求查看结果提交数据要选择

5904 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭