Как при создании элемента в JQ, в дальнейшем на нем перехватить событие?

Question

[Serdji]

Как при создании элемента в JQ, в дальнейшем на нем перехватить событие ? Например я создаю элемент при клики на объект, в общем блоке создается еще одни элемент.

$(".colors").on("click", function(){
     $( '.colorFilter' ).append( '<span class="CancelFramework">[Отмена]</span>' );
});

Но после он не перехватывает не какого события ((((

$(".CancelFramework").on("click", function(){
			$( '.colors' ).removeClass('colorBorder');
			$( 'div.color div' ).remove();
			$( 'div.color strong' ).remove();
			$( 'div.color' ).fadeOut(500);
			filterObj();
});

И ничего не происходит (

Answer 1

[Денис Инешин]

Используйте делегирование:

$(document).on("click", ".CancelFramework", function(){
      $( '.colors' ).removeClass('colorBorder');
      $( 'div.color div' ).remove();
      $( 'div.color strong' ).remove();
      $( 'div.color' ).fadeOut(500);
      filterObj();
});

Answer 2

[Pretor DH]

Есть делигированные собития, это когда событие висит на родительском блоке, а обрабатывается на потомке без железной привязки. Появился - событие работает, пропал событие есть но нет объекта и оно не работает. Вешается один раз на родителя.

$(".colors").on("click", ".CancelFramework" ,function(){
      $( '.colors' ).removeClass('colorBorder');
      $( 'div.color div' ).remove();
      $( 'div.color strong' ).remove();
      $( 'div.color' ).fadeOut(500);
      filterObj();
});

Answer 3

[Игорь]

$(".colors").on("click", function(){
    $('<span>', {'class':CancelFramework })
		.text('Отмена')
		.click(function(){
			$( '.colors' ).removeClass('colorBorder');
			  $( 'div.color div' ).remove();
			  $( 'div.color strong' ).remove();
			  $( 'div.color' ).fadeOut(500);
			  filterObj();
			})
		.appendTo('.colorFilter');
});

Answer 4

[magazovski]

Скорее всего у вас нарушен порядок выполнения. То есть элемента нет а событие вы пытаетесь навесить. попробуйте создать элемент, потом новесить событин а только потом вставить.

var el = $(document.createElement('span')).addClass('CancelFramework');
el.textContent='[Отмена]';
el.on(...).appendTo($(".colorFilter"));