Не работает js на добавленные элементы с innerHTML
Доброго времени суток, такая проблема:
есть, к примеру кубик, делаю на него такой код:
$('.kubik').mouseover(function(){
$('#'+this.id).css({'border':'3px solid #ffffff'});
});
То есть при наведении на него мышки, вокруг него белый контур. Всё работает! Если кубик добавить кроссбраузерно: on_pole.innerHTML += '<div class="kubik"> </div> '; То ничего не работает! Аналогично со всеми другими функциями. drag drop и пр. Пожалуйста, помогите с проблемой! |
Вешайте события через делегирование и все будет работать.
|
У меня и так делегирование вроде. Один обработчик на все кубики
|
вам говорят вешать событие на родительский элемент с делегированием.
<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>
|
Ветеран! Да, так проще, только в этом примере. Мне нужно также перетаскивать эти обьекты и другое...
нашел инфу по делегированию. в хтмл добавляется такой код: <div id="domens"> <div class="sait" id="myid1">текст</div> <div class="sait" id="myid2">текст</div> ... </div> Делаю так:
$('#domens').delegate(".sait","click",function(){
alert('клик!');
});
не выходит |
Цитата:
и вместо delegate - on и я не вижу особого отличия от примера, который сочинил выше я |
Ветеран, спасибо! Наконец нашел ошибку: если , как в моём случае, <div id="domens"></div>
Также добавляется кроссбрацзерно, то не получится! Этот этап я сделал, всё работает. Теперь вопрос, как следующую строчку также реализовать :
$('.sait').draggable(
{
helper:'clone',
});
делаю так:
$('#dannie').on('draggable', '.sait', function( ) {
helper:'clone';
});
не пашет |
<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>
|
Спасибо. Сделал чучуть по-другому:
$('#dannie').on('mouseover', '.sait', function( ) {
$('.sait').draggable({
helper:'clone'
});
});
|
Цитата:
Логика вашего кода - при каждом наведении курсора на любой .sait, находящийся внутри #dannie, всем .sait на сайте добавляется драгабл Чем не устраивает задавание драгабл при создании элемента? |
| Часовой пояс GMT +3, время: 22:59. |