新增jquery物件到dom中時事件失效

阿新 • • 發佈：2020-12-17

1jQuery實現同一物件增刪

<select id="opt">
    <option>北京</option>
    <option>深圳</option>
    <option>上海</option>
    <option>廣州</option>
</select>

<script type="text/javascript">
    let node = 
 $("#opt");// 這是全域性select物件
    let nodeParent = node.parent();
    function show(){
        console.log(node.val());
        // 刪除node物件(select框)，在把node物件新增進去
        nodeParent.empty();
        nodeParent.append(node);
    }
    node.blur(show);//繫結事件
    // node.on("blur",show); //一樣無效
 
</script>

2.原因是jQuery物件在插入到dom中時，事件會丟失

2.1 初始時在控制檯中看到node存在事件
在這裡插入圖片描述

2.2 執行一次後，node物件變成undefined

在這裡插入圖片描述

簡單來說就是，如果有一個jQuery物件中綁定了事件，這個物件在新增到dom中時，事件會丟失。

3.但如果是JS實現的話，是沒有問題的

<body>
<select id="opt">
    <option>北京</option>
    <option>深圳</option>
    <option> 
上海</option>
    <option>廣州</option>
</select>

<script type="text/javascript">
    let node = document.getElementById("opt");
    function show(){
        console.log(node.value);
        document.body.removeChild(node);
        document.body.appendChild(node);
    }
    node.addEventListener("blur",show); //事件持續有用
</script>

事件一直存在，chrome上可以看到

在這裡插入圖片描述

但firfox的控制檯中找不到有關的事件資訊
在這裡插入圖片描述

新增jquery物件到dom中時事件失效

技術標籤：Javajsjquerydomjavascript 1jQuery實現同一物件增刪 <select id="opt">

jquery獲取陣列長度_js中dom物件和jQuery物件的相互轉換

技術標籤：jquery獲取陣列長度可能大家在開發中，使用原生獲取dom物件進行相關操作的時候，一些原生的方法並不能滿足我們的需求，這時我們可能會使用到jquery,但是dom元素並不能直接使用jquery的方法，這時我

window.onload和$函式的區別，document中getElementById()等函式的用法,DOM物件轉換成jQuery物件

一.window.onload和$函式的區別： 1.window.onload是在所有元素(HTML頁面和CSS)載入完畢後再載入，$是在HTML（DOM結構）載入完後加載2.window.onload不能同時編寫多個，如果有多個window.onload方法只能執行一個（

【學習筆記】JS 在迴圈中設定監聽事件並使用 ajax 設定動態新增的元素的值時出現的問題及其解決方案

問題 for(var i = 1 ; i <= 10 ; i ++) { // 注意迴圈變數 i var newLine = \"<tr>\"; newLine += \"<td><input type=\'text\' id=\'sampleInput\" + i + \"\'></td>\";

簡單學習一下網頁中新增 jQuery

網頁中新增 jQuery 下載 jQuery 庫從 CDN 中載入 jQuery, 如從 Google 中載入 jQuery 下載 jQuery

jQuery---jQuery物件與DOM物件的區別

jQuery物件與DOM物件的區別 1. DOM物件：使用JavaScript中的方法獲取頁面中的元素返回的物件就是dom物件。2. jQuery物件：jquery物件就是使用jquery的方法獲取頁面中的元素返回的物件就是jQuery物件。3. jQuery物

Hibernate 中物件 set 屬性時自動儲存入庫的問題

原文地址：https://blog.csdn.net/qqfo24/article/details/83275610 背景在某個專案中，通過 Heibernate 查出某個物件後，對屬性進行了 set 操作，並沒有進行 update 操作，但是在資料中自動儲存了。

[記錄] JavaScript 中的事件(Event物件、事件源物件、事件流、事件繫結)【轉發】

event物件:什麼是event物件：用來獲取事件的詳細資訊。(如：鍵盤的狀態、滑鼠的位置、滑鼠按鈕的狀態)event物件瀏覽器相容問題：

jquery獲取並修改觸發事件的DOM元素示例【基於target 屬性】

本文例項講述了jquery獲取並修改觸發事件的DOM元素。分享給大家供大家參考，具體如下：

Jquery實現div區域性頁面重新整理中js渲染失效問題解決

layui.jsp： <link rel=\"stylesheet\" href=\"<%=basePath%>/layui/css/layui.css\"> <script type=\"text/javascript\" src=\"<%=basePath%>/layui/layui.js\"></script>