Не работает js на добавленные элементы

[natureproj]

Доброго времени суток, такая проблема:
есть, к примеру кубик, делаю на него такой код:

$('.kubik').mouseover(function(){
$('#'+this.id).css({'border':'3px solid #ffffff'});
});

То есть при наведении на него мышки, вокруг него белый контур.
Всё работает!
Если кубик добавить кроссбраузерно:

on_pole.innerHTML += '<div class="kubik"> </div> ';

То ничего не работает! Аналогично со всеми другими функциями. drag drop и пр.
Пожалуйста, помогите с проблемой!

[SkyLight]

Вешайте события через делегирование и все будет работать.

[natureproj]

У меня и так делегирование вроде. Один обработчик на все кубики

[BETEPAH]

вам говорят вешать событие на родительский элемент с делегированием.

<style>
.kubik {
	box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
	height: 20px;
	width: 20px;
	background: #ccc;
	display: inline-block;
	margin: 5px 5px 0 0;
}
</style>
<input type="button" id="add" value="еще" />
<div class="target">
	<div class="kubik"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script>
$('.target').on('mouseover', '.kubik', function( ) {
	$(this).css({'border':'3px solid #000'});
});
$('#add').on('click', function(){
	$('.target').append('<div class="kubik"></div>');
});
</script>

[natureproj]

Ветеран! Да, так проще, только в этом примере. Мне нужно также перетаскивать эти обьекты и другое...
нашел инфу по делегированию.

в хтмл добавляется такой код:
<div id="domens">
<div class="sait" id="myid1">текст</div>
<div class="sait" id="myid2">текст</div>
...
</div>
Делаю так:

$('#domens').delegate(".sait","click",function(){
 alert('клик!');
});

не выходит

[BETEPAH]

".sait","click",

поменяйте местами
и вместо delegate - on
и я не вижу особого отличия от примера, который сочинил выше я

[natureproj]

Ветеран, спасибо! Наконец нашел ошибку: если , как в моём случае, <div id="domens"></div>
Также добавляется кроссбрацзерно, то не получится!
Этот этап я сделал, всё работает. Теперь вопрос, как следующую строчку также реализовать :

$('.sait').draggable(
	{ 
helper:'clone',

	});

делаю так:

$('#dannie').on('draggable', '.sait', function( ) {
helper:'clone';
});

не пашет

[BETEPAH]

<style>
.kubik {
	box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
	height: 20px;
	width: 20px;
	background: #ccc;
	display: inline-block;
	margin: 5px 5px 0 0;
}
.target {
	height: 80px;
}
</style>
<input type="button" id="add" value="еще" />
<div class="target">
	<div class="kubik"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
$(function() {
	$('.kubik').draggable();
	$('.target').on('mouseover', '.kubik', function( ) {
		$(this).css({'border':'3px solid #000'});
	});
	$('#add').on('click', function(){
		var element = $('<div class="kubik"></div>');
		element.draggable();
		$('.target').append(element);
	});
})
</script>

[natureproj]

Спасибо. Сделал чучуть по-другому:

$('#dannie').on('mouseover', '.sait', function( ) {
	  $('.sait').draggable({ 
helper:'clone'
	});
	  
	  
});

[BETEPAH]

Спасибо. Сделал чучуть по-другому:

Если кому-то придется поддерживать этот код, вам будет сильно икаться
Логика вашего кода - при каждом наведении курсора на любой .sait, находящийся внутри #dannie, всем .sait на сайте добавляется драгабл
Чем не устраивает задавание драгабл при создании элемента?