Question

它是用jQuery文档编写的，它在选择器上的remove（）会删除与之关联的所有事件。但是在以下代码中，在调用remove函数后，与#this上的onclick相关联的警报并未被删除。我在这里缺少什么？

代码：

<div style="width:100%; min-height:100px; background-color:yellow;" id="add"  onclick="remove()">
    <ul id="remove" style="width:100%; background-color:purple; padding:4vh;">
        <li>
            <div id="this" style="width:100%; height:5vh; background-color:red;" onclick=alert("Clicked")>
                    Abc
            </div>
            <div style="width:100%; height:5vh; background-color:blue;">
                    XYZ
            </div>
            <div style="width:100%; height:5vh; background-color:orange;">
                    LMN
            </div>
        </li>
    </ul>
</div>

jQuery：

var t = 0;
var sp;
function remove(){
    if(t % 2 == 0){
        sp = $("#remove").remove();
        t++;
    }
    else{
        $("#add").append(sp);
        t++;
    }
}

Answer 1

onclick属性与jQuery中的.click()不同。附加sp时，所有标记及其属性都返回到DOM。实际上，不会删除该处理程序。追加后将其重新连接。如果使用.click()以外的jQuery的onclick

，则不会发生这种情况

编辑

例如：

$("#this").click(function() { console.log(this); alert("Some text"); });

在这种情况下，无需使用onclick。删除#this元素后，将分离此事件。另外，这种方法不适用于新创建的元素。

如果您需要处理动态生成的元素上的某些事件（不仅是单击），可以使用以下方法：

$("body").on("#this", "click", click(function() { console.log(this); alert("Some text"); });

更多信息：

https://api.jquery.com/click/

https://api.jquery.com/on/

Answer 2

.remove（）（jquery文档）

与.empty（）类似，.remove（）方法从元素中删除元素。 DOM。还要删除元素本身时，请使用.remove（）作为里面的一切。除了元素本身之外，所有绑定的事件和与元素关联的jQuery数据被删除。要删除元素而不删除数据和事件，请使用.detach（）代替。

onClick

应当避免使用

HTML属性，因为它会使标记更大且可读性更差。对内容/结构和行为的关注没有很好地分开，因此很难发现错误。

您的代码

document.addEventListener("DOMContentLoaded", function() {

    var t = 0;
    var sp;
    function remove(){
        if(t % 2 == 0){
            sp = $("#remove").remove();
            t++;
        }
        else{
            $("#add").append(sp);
            t++;
        }
    }

    $('#add').on('click', function(event) {
        remove();
    });

    $('#this').on('click', function(event) {
        alert('clicked');
    });
    
});

<html>
	<head></head>
	<body>
		
		<div style="width:100%; min-height:100px; background-color:yellow;" id="add">
			<ul id="remove" style="width:100%; background-color:purple; padding:4vh;">
				<li>
					<div id="this" style="width:100%; height:5vh; background-color:red;">
						Abc
					</div>
					<div style="width:100%; height:5vh; background-color:blue;">
						XYZ
					</div>
					<div style="width:100%; height:5vh; background-color:orange;">
						LMN
					</div>
				</li>
			</ul>
		</div>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	</body>
</html>

jQuery分离与删除

2 个答案:

.remove（）（jquery文档）

onClick

您的代码