小白项目笔记一：jQuery动态加载html到指定div - Yangsijie98的博客 - CSDN博客

第一篇博客，完全是写项目的时候做的笔记。

方法一：load()方法

用法：

$('选择器').load(url, [data], [callback]);

参数：

url: 需要导入文件的地址，可以是html，也可以是动态的脚本文件

data：参数（可选）

callback：回调，一般写回掉方法

被加载html文件部分代码 a.html：

<html>  <body>    <div id="container"></div>  </body></html>

目标html文件 test.html:

<!DOCTYPE html><html><head><title>标题</title><meta charset="utf-8"></head><body>    <p>我是html文件</p></body></html>

jQuery代码 a.js:

$('#container').load("test.html",function(respone){    $('#container').html(respone);});

这样子就可以实现将一个test.html文件加载到a.html文件中的id为container的div中。

但是这里出现的问题是：应为是将一整个html文件都加载到另一个html文件中去，所以就会出现在id为container的div中，也包含test.html文件中的<head>标签的所有内容，所以就会重复导入一些不必要的元素标签。这就可能会导致加入进container的时候布局会乱。所以用这种方法加载静态html文件并不是很好。

方法二：append()方法

用法：

$('选择器').append(字符串);

参数：

字符串：字符串内容是可以是html代码，如“<p>例子</p>”

被加载html文件部分代码 a.html：

<html>  <body>    <div id="container"></div>  </body></html>

jQurey代码：

let testHtml = `<p id="test">我是append进来的</p>`$('#container').append(testHtml);

好了，现在container就已经添加进了一个p标签，但是我想给p标签添加点击事件的时候，我却添加不了。例如：

$('#test').click(function(){  //这样子添加点击监听的时候，我并不能获取到test这个id的元素});

我百度了一下原因，是因为，我动态添加html标签的时候，新添加的节点不再dom树上。

添加监听解决方法：on()方法

用法：

$(父级选择器).on(even, childSelector, data, function);

参数：

even：必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值，也可以是数组。必须是有效的事件。

childSelector：可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。

data：可选。规定传递到函数的额外数据。

function：可选。规定当事件发生时运行的函数。

代码：
$('#container').on('click','p',function(){    //处理相关逻辑});

on方法只能处理那些需要事件的元素上，还有一种情况是：我需要获取到动态添加的html，但是添加事件。这个问题还没有解决，等我解决了这个问题再写一篇。

Original url: Access
Created at: 2019-02-20 21:11:45
Category: default
Tags: none

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论