javascript - Jquery创建新元素,但之后不会删除该元素

标签 javascript jquery html events

我的脚本有问题。我想创建动态对象,如果我按下“创建新元素”,将创建新对象,但如果我按下删除,它不起作用。为什么?谢谢。

<!doctype html>
    <html>
    <meta charset="utf-8">
    <head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script>
	$(document).ready(function() {
	
		// Create new Object inside of #content
		$("#wrapper > #taskbar > #create_new_element").click(function(){
			$("#wrapper > #content").append('<div class="new_object"><p>New Object</p><a class="remove_object">Remove</a></div>');
		});
	
		// Remove an Object inside of #content
		$("#wrapper > #content > .new_object > .remove_object").click(function(){
			$(this).closest('<div class="new_object"><p>New Object</p><a class="remove_object">Remove</a></div>').remove();
		});
	});

    </script>
    </head>
    <body>
    <div id="wrapper">

	
		<div id="taskbar">
			<p id="create_new_element">Create new Element</p>
		</div>
		
		<div id="content"></div>



    </div>
    </body>

最佳答案

您必须使用.on动态创建元素的方法。

$(document).on('click',"#wrapper > #content > .new_object > .remove_object",function(){
    $(this).closest('.new_object').remove();
});

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.

了解更多关于event delegation的信息.

关于javascript - Jquery创建新元素,但之后不会删除该元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41749821/

相关文章:

javascript - 企业使用的 SilkJS/服务器端 JavaScript 的可行性

javascript - 值严格相等问题

jquery - 有没有办法像 IE 一样在 firefox 中将 alt ="text"显示为鼠标悬停工具提示?

html - 根据 Angular 中的条件显示可点击的列表项

css - 我听说你喜欢 DIV,所以我把你的 DIV 放在你的 DIV 中

java - HTML 嵌入不适用于 Java Applet

javascript - 使用 CSS 和 Javascript 将动画添加到 HTML DOM 对象的正确方法是什么?

javascript - &lt;script&gt;未从给定的 map 地址 jquery 或 javascript 获取纬度和经度

javascript - 返回按钮从 javascript 模板加载相关的 html

javascript - IE 使用类 jquery 返回相同的最后一个单选按钮值