由 jquery 创建的元素上的事件答案

【问题标题】：Events on elements created by jquery由 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 的意思是“添加到末尾”，因此您不必通过查找特定项目并转到最后一个项目等。您只需要追加，它就会在末尾。
好的，谢谢你的帮助，我明天去看看。
请解释您所说的“不工作”是什么意思。究竟是什么不工作？

标签： javascript html jquery dom

【解决方案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() 的文章，但我认为我这样做是对的。一定会学到的！非常感谢