无法隐藏我用javascript用javascript生成的html元素
[英]Can`t hide html element that I generated with javascript with jquery
问题描述
I want to create a to do list....the add and delete buttons work but i want to delete an element when i click on it...i tried with jquery but it doesnt work when i click on the javascript generated elements, but when i test on a html element that was initial on the page it works. 
我想创建一个待办事项列表。...添加和删除按钮可以工作，但是我想在单击元素时将其删除...我尝试使用jquery，但是当我单击javascript生成的元素时，它不起作用，但是当我在页面上初始的html元素上进行测试时，它可以工作。 What is the problem ? 问题是什么 ？ Here is the code: 这是代码：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap /3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1 /jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<meta charset="utf-8">
<title></title>
</head>
<body style="margin: 40px">
<div id="div1">
<h1>To do app</h1>
<input type="text" name="" value="" id="inp">
<button type="button" name="button" onclick="adauga()">Adauga</button>
<button type="button" name="button" onclick="sterge()">Sterge</button>
<hr></hr><br>
</div>
<h5 id="xxx">jquery</h5>
<script>
function adauga() {
var cuvant = document.getElementById('inp').value;
var para = document.createElement("p");
para.setAttribute("id","z");
var node = document.createTextNode(cuvant);
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
}
function sterge() {
var parent = document.getElementById("div1");
var child = document.getElementById("z");
parent.removeChild(child);
}
$(document).ready(function(){
$("p").click(function(){
$("p").hide();
});
});
</script>
</body>
</html>
3 个解决方案
解决方案1
2 已采纳 2019-01-13 17:36:37
try this one: 试试这个：
$(document).ready(function(){
$("body").on("click","p", function(){
$("p").hide();
});
});
Snippet: 片段：
function adauga() { var cuvant = document.getElementById('inp').value; var para = document.createElement("p"); para.setAttribute("id","z"); var node = document.createTextNode(cuvant); para.appendChild(node); var element = document.getElementById("div1"); element.appendChild(para); } function sterge() { var parent = document.getElementById("div1"); var child = document.getElementById("z"); parent.removeChild(child); } $(document).ready(function(){ $("body").on("click","p", function(){ $(this).hide(); }); });
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap /3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <meta charset="utf-8"> <title></title> </head> <body style="margin: 40px"> <div id="div1"> <h1>To do app</h1> <input type="text" name="" value="" id="inp"> <button type="button" name="button" onclick="adauga()">Adauga</button> <button type="button" name="button" onclick="sterge()">Sterge</button> <hr></hr><br> </div> <h5 id="xxx">jquery</h5> </body> </html>
解决方案2
1 2019-01-13 17:41:17
The p element doesn't exist till you click the button and run the function adauga(), so you can't bind the click event to an element that doesn't exist yet, You have to bind the click event in your adauga() function as below: 在单击按钮并运行函数adauga（）之前，p元素不存在，因此无法将click事件绑定到尚不存在的元素，您必须在adauga（）中绑定click事件。 ）功能如下：
function adauga() {
var cuvant = document.getElementById('inp').value;
var para = document.createElement("p");
para.setAttribute("id","z");
var node = document.createTextNode(cuvant);
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
$("p").click(function(){
$("p").hide();
});
}
or run the function when the page is ready: 或在页面准备好后运行该函数：
$(document).ready(function(){
adauga();
$("body").on("click","p", function(){
$("p").hide();
});
});
attention: hide() function doesn't remove an element just change the display to none, if you want to remove the element from your dom use remove() function instead!!! 注意：hide（）函数不会删除元素，只是将显示更改为无，如果要从dom中删除元素，请使用remove（）函数！！！
解决方案3
0 2019-01-13 17:40:47
When your code runs the event-listeners of the p-elements, your elements doesn't exist, so they aren't evected by the registering of the event-listener. 当您的代码运行p元素的事件侦听器时，您的元素不存在，因此注册事件侦听器不会将其移出。 You have to add the event-listener after you created the p element. 创建p元素后，您必须添加事件监听器。 Try something like: 尝试类似：
var para = document.createElement("p");
$("#div1").on('click', 'p' function(){
$("p").hide();
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.