Question

如果我们将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时锚点链接不起作用，每个答案都必须得到赞赏？

Answer 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将检查目标元素（并相应地采取行动）。

以下是对代码段的更新：

＆＃13;

$(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');
   });
});

＆＃13;

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

＆＃13;

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

Answer 3

根据这个问题，我通过更改行

解决了这个问题

$（＆＃39; .remove＆＃39;）。on（＆＃39; click＆＃39;，function（）{

到$（＆＃39; body＆＃39;）。on（＆＃39; click＆＃39;，＆＃39; .remove＆＃39;，function（）{

更新：$（＆＃39; .outer＆＃39;）on（＆＃39;点击＆＃39;，＆＃39;。删除＆＃39;，功能（）{

jQuery event handler .on() not working

＆＃13;

$(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');
   });
});

＆＃13;

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

＆＃13;

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

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

是否有jQuery的“更新”功能？

5 个答案: