jQuery——删除 动态添加的元素的方法

这两天在写JS,写一个遮罩层的时候发现了一个挺有意思的地方,就是直接运用jQ的$选择器的时候无法选择出动态创建的元素,因此也就无法做到删除这个动态添加的元素。然后找寻了各种方法,目前找到两种我觉得是挺好的解决办法。


先看看我最初写的源代码

HTML:只对一个DIV操作。查找按钮是用来做触发事件的。ID为mask的DIV是拿来当做遮罩层的。

1
2
3
4
5
<form class="search">
<input type="text" class="input-text">
<input type="button" class="input-button" value="查找">
</form>
<!-- <div id="mask"></div> -->

CSS:

1
2
3
4
5
6
7
8
9
10
11
#mask{
position: absolute;
z-index: 100!important;
left: 0;
top: 0;
height: 1000px;
width: 100%;
background-color: #000;
opacity: 0.75;
filter: alpha(opacity = 75);
}

JS:

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function () {
var _mask=$("<div id='mask'></div>");
// 点击按钮创建遮罩层
$(".input-button").click(function(){
$(_mask).appendTo("body");
});
// 点击遮罩层时删除遮罩层
$("#mask").click(function(){
$(this).remove();
})
});

以上代码看似能够实现我们的功能,但是实际上,当你点击遮罩层的时候,并不会删除遮罩层。因为遮罩层是我们点击查找按钮的时候动态创建的,所以直接靠$("#mask")是无法选择出这种动态创建的元素的,自然也就没有作用了。


第一种办法

  • 函数封装

我们可以将$("#mask")这个选择器和动态创建元素的方法封装到一个函数中,然后在创建遮罩层的功能中引用这个函数,就能实现JQ识别出这个动态创建的元素。

代码如下-JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 将方法封装进一个叫做mask的函数中
function mask(){
var _mask=$("<div id='mask'></div>");
$(_mask).appendTo("body");
$("#mask").click(function(){
$(this).remove();
})
};

// 点击按钮创建遮罩层时调用这个函数
$(".input-button").click(function(){
mask();
return false;
});

第二种办法

  • 使用jQuery的on()方法

jQuery在1.9版本之后取消了live()方法,所以对于原先用live()实现的方法现在改用on()方法。PS:同时on()方法还能够取代bind()、delegate()方法,也是官方推荐的一种方法。

先说明一下live()方法。引用W3School的定义:

live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)。

注意第二句,

适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)。

因此live()方法可以用于选择动态创建的元素。在使用1.9以后版本的jQuery时,用on()方法来代替。

on()的用法:$(selector).on(event,childSelector,data,function,map)

当其他选项没有参数时,我们可以忽略它们。这里我们关注三个选项。event:事件,childSelector:子选择器,function:功能。
让on()产生live()相同的功能时,$(selector)里的selector要写成document,也就是绑定整个页面元素。这点很关键,通过页面元素去选择childSelector,即当页面元素的子元素有变化时,该方法能够实时选择出你想要的那个子元素,也就实现了动态选择。而event我们这里是点击,也就是click。至于function,看如下代码:

1
2
3
4
5
6
7
8
9
var _mask=$("<div id='mask'></div>");
// 点击按钮创建遮罩层
$(".input-button").click(function(){
$(_mask).appendTo("body");
});
// 点击遮罩层时删除遮罩层,注意采用了on()方法。
$(document).on("click","#mask",function(){
$(this).remove();
});

在写的时候我貌似发现原生JS由于获取元素id就是通过document.getElementById()的方法也就是直接从document里获取,貌似也不会出现选择不了动态创建元素的情况。这点以后仔细研究后再更新吧。

Author: Molunerfinn
Link: https://molunerfinn.com/jquery-1/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.
支付宝打赏
微信打赏