Вторая функция .click() не работает

Question

Первая функция .click используется для добавления элемента (div) в контейнер, а вторая используется для его удаления из контейнера. Контейнер изначально не имеет элементов. Удаление функции, нажав на нее не работает

$(document).ready(function(){ 
    $(".class1").click(function(){ 
     //Code for adding element to the container and 
     // removing class1 from it and adding class2 

    }); 

    $(".class2").click(function(){ 
     alert("hi"); //Even the alert is not displayed 
     $(this).fadeOut(100);  
    }); 
}); 

Однако, это работает, если элемент уже существует до загрузки страниц в контейнере. Любые причины? Это из-за функции document.ready? Решения?

Answer 1

Это потому, что, когда вы добавляете обработчик щелчка для .class2 элементов, вы только добавив событие элементов, которые имеют этот класс в тот конкретный момент времени; например, нет.

Вместо этого вам необходимо использовать делегирование событий так;

$(document).on('click', '.class2', function() { 
    alert('hi'); 
    $(this).fadeOut(100); 
}); 

Это будет работать, как он связывает событие document (который всегда существует), который прослушивает за клики на любых .class2 элементов с помощью делегирования событий. Для получения дополнительной информации ознакомьтесь с документацией on().

Answer 2

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

$(document).ready(function(){ 
    $(".class1").click(function(){ 
      //Code for adding element to the container and removing class1 from it and adding class2 

     $(".class2").click(function(){ 
      alert("hi");   //Even the alert is not displayed 
      $(this).fadeOut(100); 

     }); 
    }); 
}); 

Answer 3

использовать делегат-обработчик событий для обоих классов (если вы переключаетесь между ними обоими, или если вы не возвращаетесь к class1, то второго достаточно), потому что после изменения class элементы рассматриваются как динамические.

$("#container").on("click", ".class1", function(){ 

}); 

$("#container").on("click", ".class2", function(){ 

}); 

Здесь #container относится к родителю того класса, вы можете иметь что-то другое.

Answer 4

События не могут быть наложены на элементы, которых нет при разработке функции. Но вы можете создать оболочку элемент (Div) вокруг «Class1» и «Class2», как это:

<div id="class1_wrapper"> 
    <span class="class1"> 
</div> 

Я использовал «пролет» для class1, потому что я не знаю, какой элемент он. Затем, вместо того, чтобы событие щелчка, вы можете использовать «на()»:

$("#class1_wrapper").on("click", ".class1", function() 
{ 
    //Code for adding element to the container and removing class1 from it and adding class2 
}); 

этот путь, даже если class1 не существует (то же самое можно сделать для class2), событие щелчка будет работать