События JQuery не работают для динамически добавленных Divs

Question

У меня очень неприятная проблема. У меня есть кнопка с именем #log-out, и когда вы нажимаете на нее, она сохраняет определенный фрагмент данных в переменной localStorage под названием importantOSdata.

Когда страница загружает его, проверяет, является ли переменная != null, и если она не удаляет div, который был сохранен в переменной localstorage со страницы, и заменяет его тем, который сохранен в переменной localStorage. Проблема заключается в том, что заголовок говорит, что jquery-события не будут работать на динамических div, даже если они уже работали, когда не было сохраненных данных, и это был просто жесткий код html. Я попытался использовать .on(), но, как вы можете видеть в коде, я использую ключевое слово и не будет работать должным образом. Я ДОЛЖЕН использовать ключевое слово this.

(1) Код, который у меня есть, имеет событие click для div и проверяет, имеет ли он определенный тип тега данных (название данных) и простой старый тег src. Затем он передается в функцию, которая создает всплывающее iframe с src из тега src. (1) код, который используется для работы:

$(".icon").each(function() { 
    var iconFile = $(this).attr("data-iconFile"); 
    var title = $(this).attr("data-title"); 
    var file = $(this).attr("src"); 
    $(this).css("backgroundImage", "url(" + iconFile + ")"); 
    $(this).dblclick(function() { 
     new createFrame(file,title); 
     addItem($(this).attr("class"),iconFile); 
     //canSlideUp = false; 
    }); 
}); 

Новый код, который я пробовал:

$(".icon").each(function() { 
      var iconFile = $(this).attr("data-iconFile"); 
      var title = $(this).attr("data-title"); 
      var file = $(this).attr("src"); 
      $(this).css("backgroundImage", "url(" + iconFile + ")"); 
       $(this).on("dblclick",function() { 
        new createFrame(file,title); 
        addItem($(this).attr("class"),iconFile); 
        //canSlideUp = false; 
       }); 
      }); 
     }); 

и безопасный/код загрузки:

$(document).ready(function() { 
    $("#log-out").click(function() { 
     alert("Your Progress was saved:"+localStorage.getItem("inportantOSdata")); 
     localStorage.setItem("inportantOSdata",document.getElementById("data-holder").innerHTML); 
    }); 
}); 
window.onload = function(){ 
    if(localStorage.getItem("inportantOSdata") != null) { 
     $("#data").remove(); 
     alert("data exists"); 
     $("#data-holder").html(localStorage.getItem("inportantOSdata")); 
    } 
} 
//localStorage.clear(); 

Вы можете увидеть как я использую это ключевое слово. Любая интересная проблема? Заранее спасибо!

Answer 1

Помните, что вы можете связать событие click с контейнером, внутри которого вы динамически добавляете элементы.

Так что скажем, что контейнер #container.

Вы можете связать это событие своим детям, используя

$("#container").on('click', ".xyz" ,function(){ 
    // good to go. 
    // $(this). gives you the handle to each element individually. 
}); 

Как это работает: - Даже если subject element не присутствовали во время выполнения этого сценария, он все равно будет работать нормально , Потому что ..

При связывании .click() событие на определенный элемент, то jQuery должен проверить для всех согласующих элементов и связать событие на первое исполнение, но если элемент был добавлен позже, то нет ни одного события связанный с ним.

Но когда вы связываете события в контейнере и ограничивает сферу его применения конкретного .class или #id, то каждый раз, когда контейнер регистрирует щелчок, jQuery проверки для этого соответствующего элемента (.xyz в нашем случае) в пределах контейнера и событие запускается в отношении контейнера, а не самого элемента, поэтому существование subject element на самом деле не имеет значения во время выполнения скрипта.

Примечание: - Несмотря на то, что этот метод удобен, необходимо позаботиться о привязке события к ближайшему родительскому контейнеру, так как этот метод после вызова должен пройти через DOM, чтобы найти все соответствующие элементы. И это может оказаться угрозой для производительности, как только будет обеспечено достаточное количество DOM или количество динамически добавленных элементов достигнет значительной суммы (ограничено вычислительной мощностью клиента).Так что что-то вроде $(document).on('click', #xyz ,function(){}); - это строгое нет.