gpt4 book ai didi

javascript - jQuery 回调 - 添加新元素时似乎切换元素 "on and off"

转载 作者:行者123 更新时间:2023-11-29 10:32:36 25 4
gpt4 key购买 nike

作为序言,我是一名学生,刚刚开始学习 Javascript 和 jQuery。因此,我的目标是从表单字段中获取信息并将其添加到“联系人卡片”页面中,然后单击“联系人卡片”可以在两组信息之间切换,在本例中为名称和描述。

因此,一旦添加了新卡片,我就会有一个回调来使卡片可点击。它发生故障的地方是第一张卡按预期工作,添加第二张卡,第二张卡然后工作,但第一张不工作,添加第三张卡,第三张和第一张工作,第二张不再工作,依此类推。使用 $(document).on 而不是回调可以使一切正常,但我真的很想弄清楚为什么回调不起作用。

如有任何建议,我们将不胜感激,谢谢!

var users = [];
var identifier = 0;

function cardFlipHandler(){
$(".card").click(function(){
var tempID = $(this).attr("identifier");
if($(this).attr("state") === "front"){
$(this).html("<p>" + users[tempID].description + "</p>");
$(this).attr("state", "back");
}
else {
$(this).html("<h1>" + users[tempID].first_name + " " + users[tempID].last_name + "</h1><p>Click for description</p>");
$(this).attr("state", "front");
}
});
}

$(document).ready(function(){
cardFlipHandler();
$("#addUser").click(function(){
var fname = $("form").find("input[name='first_name']").val();
var lname = $("form").find("input[name='last_name']").val();
var desc = $("form").find("input[name='description']").val();
users.push({first_name: fname, last_name: lname, description: desc});
$("#rightSide").append("<div class='card' identifier='" + identifier + "' state='front'><h1>" +fname + " " + lname + "</h1><p>Click for description</p></div>");
identifier++;
cardFlipHandler();
});

/*$(document).on("click", ".card", function(){
var tempID = $(this).attr("identifier");
if($(this).attr("state") === "front"){
$(this).html("<p>" + users[tempID].description + "</p>");
$(this).attr("state", "back");
}
else {
$(this).html("<h1>" + users[tempID].first_name + " " + users[tempID].last_name + "</h1><p>Click for description</p>");
$(this).attr("state", "front");
}
});*/
});
*{
margin: 5px;
padding: 0px;
}

#wrapper {
width: 970px;
margin: 0 auto;
}

#userTable tr td, tr th{
border: 1px solid black;
}

#leftSide {
display: inline-block;
width: 400px;
vertical-align: top;
}

#rightSide {
display: inline-block;
width: 400px;
vertical-align: top;
}

.card {
width: 300px;
height: 150px;
background-color: #F1F1F1;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Contact Cards</title>
<meta name="description" content="Coding Dojo assignment to create a page where contact cards can be added.">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="card.js"></script>
</head>
<body>
<div id="wrapper">
<div id="leftSide">
<form>
<label>First Name:</label>
<input type="text" name="first_name">

<label>Last Name:</label>
<input type="text" name="last_name">

<label>Description:</label>
<input type="text" name="description">
</form>
<button id="addUser">Add User</button>
</div>

<div id="rightSide">

</div>

</div>
</body>
</html>

最佳答案

嗯,这个很有趣。

首先,$(document).on("click", ".card", function); 是执行此操作的正确方法。

如果我是你,我会坚持这样做。

但是要解释你的代码是怎么回事。 (跟随 here )

在 JSFiddle 中,我在 JS 的第 7 行添加了一个 console.log。每次单击卡片时它都会触发。所以打开你的控制台(F12),制作一张卡片。

当您单击它时,它将按预期运行。所以制作另一张卡片。

现在您将看到第一个卡片的点击事件在您每次点击时触发两次。基本上翻转,然后再翻转,让你回到原来的状态。第二张卡按预期工作。制作另一张卡片。

现在第一张卡片发射三次,第二张卡片发射两次。所以现在第一个似乎在工作,因为它停在不同的面上,而第二个是“坏的”,因为它在原来的面上结束。

本质上,通过在每次制作卡片时运行回调,您不仅向新元素添加了一个事件监听器(如预期的那样),而且还向旧卡片添加了另一个事件监听器。

除其他原因外,这就是为什么我们对动态创建的元素使用 $(document).on(event, selector, function); 的原因。

有关 .on() 事件和 .click() 事件的进一步阅读可以在下面找到。

.on() | jQuery API Docs

.click() | jQuery API Docs

关于javascript - jQuery 回调 - 添加新元素时似乎切换元素 "on and off",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42561445/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com