由 jquery 创建的元素上的事件
Posted
技术标签:
【中文标题】由 jquery 创建的元素上的事件【英文标题】：Events on elements created by jquery 【发布时间】：2021-02-28 03:44:09 【问题描述】：我仍在学习 jquery，我面临一个可能很多人都面临的问题，这只是逻辑，但我似乎找不到学习如何做到这一点的好方法。
所以我的问题如下：
我正在使用 jquery 在页面上创建名为 .lieu 的元素。基本上，当您输入文本并单击“确定”时，您创建了另一个 .lieu，它应该在 destinations 选项卡中显示文本 "en passant par le bois des lutins"。
使用 html 创建的第一个可以正常工作，但其他的不行。
似乎脚本能够在使用 html 创建的元素上执行（这可能是由于:)
$( document ).ready(function() );
我怎样才能使用好的方法来完成这项工作？ 非常感谢。
$(".validate").click( function()
var name = $(this).closest(".envies").find("input[name='name']").val();
var lieu = $("<div />",
"class": "lieu"
)
.css(
left: 0,
top: 0
)
.append($("<p>"+name+"</p>"))
.appendTo(document.body););
$(".lieu").on("mouseenter", function(checklieu)
var ordredestinations = $("<div />",
"class": "lieuliste"
)
.css(
)
.append($("<p>en passant par le bois des lutins</p>"))
.appendTo(".destinations");
);.destinations
background-color: lightgrey;
position: fixed;
right: 0;
top: 0;
.envies
background-color: grey;
position: fixed;
right: 300px;
top: 0;
width: 250px;
height: 50px;
.lieu
position: absolute;
left:0px;
top: 100px;
background-color: red;
width: 200px;
height: 100px;
border-radius: 250px;
text-align: center;
vertical-align: middle;
line-height: 100px; /* The same as your div height */<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="lieu"><p>bois des lutins</p></div>
<div class="destinations"></div>
<div class="envies">
<input type="text" id="name" name="name" size="10" placeholder="name">
<button class="validate">OK</button>
</div>
</body>
<script type="text/javascript"></script>【问题讨论】：
看起来你可以简化很多。查找 jquery 附加。 Append 的意思是“添加到末尾”，因此您不必通过查找特定项目并转到最后一个项目等。您只需要追加，它就会在末尾。 好的，谢谢你的帮助，我明天去看看。 请解释您所说的“不工作”是什么意思。究竟是什么不工作？ 【参考方案1】：我认为我看到了你的问题。
当一个文档（网页）加载时，特定的目标 jQuery 函数就像你的一样..
$(".validate").click( function()
// ...
);
// and...
$(".lieu").on("mouseenter", function()
// ...
);
..只会在文档准备好时绑定，而不是因为您在 $(document).ready(function() 中使用这些。所以当 doc 准备好后，上面 2 个函数运行并绑定。
像您在 doc ready 中那样运行函数是一种很好的做法。
但是，如果您打算将现有执行的函数自动绑定到新添加的文档元素。那么您的前 2 个函数超出了范围。
你需要查看.on()https://api.jquery.com/on/
例如，如果您希望.lieu div 等新添加的文档元素被您的mouseover 函数击中，那么您可以像这样使用.on 函数...
$(document).on("mouseenter", ".lieu", function()
第二个参数.on() 是.lieu 选择器，在$(document) 中作为主要的jQuery 选择器对象。
意味着如果您将任意数量的新.lieu div 附加到document html，使用$(document) 中的.on() 选择器参数将始终在此选择器上的鼠标悬停事件的范围内。
【讨论】：
是的！你是对的，我找到了一篇关于.on() 的文章，但我认为我这样做是对的。一定会学到的！非常感谢以上是关于由 jquery 创建的元素上的事件的主要内容，如果未能解决你的问题，请参考以下文章