jQuery 是否有“更新”功能？答案

【问题标题】：Is there an "Update" function for jQuery?jQuery 是否有“更新”功能？
【发布时间】：2016-12-06 01:43:15
【问题描述】：

如果我们将 Html 推送到 Dom ，它将在那里显示但不会更新。 jQuery有更新功能吗？

$(function(){
   $('#add').on('click', function(){
       $('.outer').append('<div class="data"><input type="text" value="enter" /><a href="#" class="remove">Remove</a></div>');
   });
   $('.remove').on('click', function(){
       alert('not working');
   });
});

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>

<div class="outer">
	<input type="button" value="Click me" id="add" />
</div><!-- /.outer -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

</body>
</html>

当我们推送到DOM 时，锚链接不起作用，必须感谢每个答案？

【问题讨论】：

您需要使用后端服务来存储数据。所以，即使你刷新。数据仍然存在。
不需要后端，我们可以通过本地存储使用javascript或jQuery来完成

标签： javascript jquery html css

【解决方案1】：

您应该改用$(document).on('click', '.remove'：

$(function(){
   $(document).on('click', '#add', function(){
       $('.outer').append('<div class="data"><input type="text" value="enter" /><a href="#" class="remove">Remove</a></div>');
   });
   $(document).on('click', '.remove', function(){
       alert('not working');
   });
});

这样 jQuery 会监听文档上的click 事件，如果目标元素是.remove（例如） - 该函数将被触发。是否动态添加元素无关紧要 - click 事件始终在文档上，jQuery 将检查目标元素（并采取相应措施）。

这是您的 sn-p 的更新：

$(function(){
   $(document).on('click', '#add', function(){
       $('.outer').append('<div class="data"><input type="text" value="enter" /><a href="#" class="remove">Remove</a></div>');
   });
   $(document).on('click', '.remove', function(){
       alert('not working');
   });
});

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>

<div class="outer">
	<input type="button" value="Click me" id="add" />
</div><!-- /.outer -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

</body>
</html>

【讨论】：

我们可以将它更新到 dom 吗，（就像我刷新页面内容不会消失一样）
实际上 - 它是在 dom 中更新的。问题是event 已附加到所有旧 .remove 元素（而我们刚刚添加的新.remove 元素没有附加此事件）。
我不确定在文档上监听事件是否更有意义，因为只要单击文档，代码就会运行。
您始终可以在特定容器上设置侦听器（在本例中为 .outer）。它将是$('.outer').on('click', '.remove', function() { ...

【解决方案2】：

您将click 事件附加到document 中不存在的元素。

当元素被动态创建时，您可以使用jQuery() 将事件附加到元素。

$(function() {
  $("#add").on("click", function() {
    var div = $("<div>", {
      "class": "data",
      html: $("<input>", {
        type: "text",
        value: "enter"
      }),
      append: $("<a>", {
        href: "#",
        "class": "remove",
        html: "Remove",
        on: {
          click: function() {
            alert("not working");
          }
        }
      })
    })
    $(".outer").append(div);
  });
});

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Untitled Document</title>
</head>

<body>

  <div class="outer">
    <input type="button" value="Click me" id="add" />
  </div>
  <!-- /.outer -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

</body>

</html>

【讨论】：

不错，我从没见过这样的代码，太棒了
@JishnuVS 见jQuery(html, attributes)
我想学习 Javascript 和 jQuery ，有没有教程可以学习顶级的 jQuery
@JishnuVS 您可以浏览jQuery documentation、javascript、jquery 问题和答案，在这里您会发现有趣的stackoverflow。另见WebPlatform docs、Ecma TC39 和规范ECMAScript® 2017 Language Specification

【解决方案3】：

根据这个问题，我通过换行解决了

$('.remove').on('click', function(){

to $('body').on('click','.remove', function(){

更新：$('.outer').on('click','.remove', function(){

jQuery event handler .on() not working

$(function(){
   $('#add').on('click', function(){
       $('.outer').append('<div class="data"><input type="text" value="enter" /><a href="#" class="remove">Remove</a></div>');
   });
   $('.outer').on('click','a.remove', function(){
       alert('not working');
   });
});

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>

<div class="outer">
	<input type="button" value="Click me" id="add" />
</div><!-- /.outer -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

</body>
</html>

【讨论】：

基本上将 .on 附加到现有元素，然后使用第二个参数指定“预期”元素。当然，这个解决方案只是让它工作，你可以做一些事情来使事件处理程序更具体，比如替换 document.body。
为什么要使用document.body而不是父元素.outer来附加click事件？
对不起，做了一个快速而肮脏的方法。这也有效。这取决于您希望事件在什么上下文中触发。我用 .outer 更新了答案，因为它似乎是这个问题的最佳上下文。

【解决方案4】：

问题是$('.remove') 在您尝试为其分配事件时未定义。改变

$(function(){
   $('#add').on('click', function(){
       $('.outer').append('<div class="data"><input type="text" value="enter" /><a href="#" class="remove">Remove</a></div>');
   });
   $('.remove').on('click', function(){
     alert('not working');;
   });
});

到

$(function(){
  $('#add').click(function(){
    $('.outer').append("<div class='data'><input type='text' value='enter' /><a href='#' class='remove'>Remove</a></div>");       
    $('.remove').on('click', function(){
      $(this).parent().remove();
    });
  });
});

<head>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
  <meta charset='utf-8'>
  <title>Untitled Document</title>
</head>
<body>
  <div class='outer'>
	<input type='button' value='Click me' id='add' />
  </div>
</body>

【讨论】：

这真的不好，因为每次你添加新按钮。您将click 事件附加到所有 .remove 元素（一遍又一遍）。基本上，如果您在 add 上单击 5 次，然后单击第一个 remove - 您将收到 5 个警报。
感谢您在这里解释问题@Dekel ...我最初对否决票有点困惑
没关系，因为每次点击都会添加事件，它会正常工作。
这就是我们学习事物的方式:)（我讨厌人们无缘无故地投反对票）。 @PHPglue，请保留此答案（如果您不在乎），以便人们能够从解释中学习。
如前所述 - 每次点击都会添加多个事件。这是一个问题（如果你问我）。

【解决方案5】：

$(function(){
   $('#add').on('click', function(){
       $('.outer').append('<div class="data"><input type="text" value="enter" /><a href="#" class="remove">Remove</a></div>');
   });
   $('.remove').on('click', function(){
       alert('not working');
   });
});

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>

<div class="outer">
	<input type="button" value="Click me" id="add" />
</div><!-- /.outer -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

</body>
</html>

【讨论】：