jquery 創建的元素上的事件

Question

我仍在學習 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>

Answer 1

A 認為我看到你的問題。

當一個文檔（網頁）加載時，特定的目標 jQuery 功能就像你的一樣..

$(".validate").click( function() {

   // ...

});

// and...

$(".lieu").on("mouseenter", function() {

   // ...

});

..只會在文檔准備好時進行綁定，因為您在$(document).ready(function()中使用了這些，所以當 doc 准備好時，上述 2 個函數會運行並綁定。

像在文檔就緒中一樣運行函數是一種很好的做法。

但是，如果您打算自動將現有執行的函數綁定到新添加的文檔元素.. 那么您的前 2 個函數超出了范圍。

您需要查看.on() https://api.jquery.com/on/

例如，如果您希望新添加的文檔元素（如.lieu divs）被mouseover功能擊中，那么您可以像這樣使用.on功能...

$(document).on("mouseenter", ".lieu", function()

.on()第二個參數是.lieu選擇器，在$(document)作為主要的 jQuery 選擇器對象。

這意味着如果您將任意數量的新.lieu div 附加到document html，在$(document)使用.on()選擇器參數將始終在此選擇器上的鼠標懸停事件范圍內。

jquery 創建的元素上的事件

問題描述

1 個解決方案

解決方案1
1 已采納 2020-11-17 04:12:43

jquery 創建的元素上的事件

問題描述

1 個解決方案

解決方案1 1 已采納 2020-11-17 04:12:43

解決方案1
1 已采納 2020-11-17 04:12:43