js怎样让把一个节点从这里移除到另一个地方仍具有事件

JavaScript023

js怎样让把一个节点从这里移除到另一个地方仍具有事件,第1张

按照你的要求，做了一个示例，把一个已经绑定了点击事件的元素，移动到另一个地方，事件任然有效。代码如下：

HTML：

<div id="a"><span class="test">测试</span></div>

<div id="b"></div>

<button>移动测试节点</button>

jQuery：

$('.test').click(function() {

    alert('我在ID为 ' + $(this).parent().attr('id') + ' 的元素中点击了测试内容')

})

$('button').click(function() {

    $('#b').append($('.test'))

})

测试过程截图：

1、初始化：

2、点击“测试”：

3、点击“移动测试节点”：

4、再次点击“测试”：

使用jquery库的函数：remove()。

功能思路：展现一个UL，然后设计一个按钮，通过绑定删除函数，点击时删除所有LI节点。

实例演示如下：

1、设计简单的一个页面，其中html代码如下：

简单的样式文件：

此时的页面内容展示如下：

2、设计JS代码，实现删除函数。

3、实例操作，点击按钮，实现节点删除，展示如下：

完成设计，此时的DOM节点如下：

扩展资料：

remove函数详情解析：

1、定义和用法：

remove() 方法移除被选元素，包括所有文本和子节点。该方法不会把匹配的元素从 jQuery 对象中删除，因而可以在将来再使用这些匹配的元素。

但除了这个元素本身得以保留之外，remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除。这一点与 detach() 不同。

2、语法：

$(selector).remove()。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="content-type" content="text/htmlcharset=GBK">

<title>js appendChild removeChild 添加 删除 子节点</title>

<script type="text/javascript">

function createSpan(){

var span=document.createElement_x_x("span")

span.innerHTML="子节点"

document.getElementByIdx("content").appendChild(span)

}

function deleteSpan(){

var content=document.getElementByIdx("content")

//var childs=content.childNodes//ie 和ff 获取子节点不一致(ff会将TEXT_NODE计入在内)

var childs=content.getElementsByTagName_r("span")

if(null!=childs){

content.removeChild(childs[childs.length-1])

}

}

</script>

</head>

<body>

<div id='content' style='background-color:#ff0000'>

<span>节点</span>

</div>

<input type='button' onclick="createSpan()" value="创建节点"/>

<input type='button' onclick="deleteSpan()" value="删除节点"/>

</body>

</html>