JQuery привязки событий к новым элементам

Question

JAVA SCRIPT

$(document).ready(function() { 
    $(".group").click(groupFile); 

    function groupFile(){ 
     alert('clicked!'); 
    } 
}); 
function insert() 

{ 
    $("body").append("<div class='group' ></div>"); 
} 

HTML

<div class='group' > 
</div> 

<input type="button" value="insertNewElement" id="insert" onclick="insert()"/> 

когда страница загружена, по щелчку div.group работает хорошо и огонь groupFile и оповещения для меня. , но при установке нового div.group .onclick div.group функция groupFile не работает? пожалуйста, помогите мне

Answer 1

Вы можете использовать JQuery on() метод делегирования событий в статическом предку, как показано ниже:

$(document).ready(function() { 
$(document).on("click",".group",groupFile); 
function groupFile(){ 
    alert('clicked!'); 
} 
}); 

подробнее о event delegation

Answer 2

Вы должны передать событие BODY (или документ или «обычно» лучше всего на ближайший статический родительский элемент). Использование .on(), проходят selector параметров как это:

$('body').on('click', 'div.group', function(){ 
    //... 
}); 

See explanation

Answer 3

Для динамических элементов, которые необходимо связать с событием на теле:

$("body").on("click", ".group", function(e){ 
    alert('clicked'); 
});