Question

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

<!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>

Answer 1

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

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

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。

详细了解event delegation。

Answer 2

您在创建元素后将事件绑定到新创建的元素

检查以下代码段

＆＃13;

$(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>');
    bindRemoveEvent();
  });

  function bindRemoveEvent() {
      $(".remove_object").on('click', function() {
        // console.log(this);
        $(this).closest('.new_object').remove();
      });
    }
    // Remove an Object inside of #content

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<body>
  <div id="wrapper">


    <div id="taskbar">
      <p id="create_new_element">Create new Element</p>
    </div>

    <div id="content"></div>



  </div>
</body>

＆＃13;

希望这有帮助

Jquery创建新元素但不会在

2 个答案: