Не работает scroll, click работает
Совсем замучился. Элемент #div_skndb создан скриптом через append со свойством 'overflow':'scroll' внутри родительского постоянной разметки #divcont. Почему-то 'click' работет, а 'scroll' нет. Никакие комбинации с .live, .bind не помогают. Jquery стоит 1.11.2, плюс jquery-migrate-1.2.1.js.
$('#divcont').on('scroll, click','#div_skndb',function(){
console.log('scroll');
})
Направьте мысль в правильном направлении. |
laaf,
а если вместо scroll -> mousewheel |
Спасибо, но не сработало.
|
$('#divcont').on('scroll click','#div_skndb',function()
|
laimas,
:) просмотрел запятую |
Тоже не помогло. Я по отдельности естественно тоже события пробовал. Click работает, scroll нет. Прямо заколдованность какая-то. Ну ведь кто-то сталкивался. Не представляю, как еще пошаманить.
|
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
#as1, #as2 {
width: 150px;
height: 150px;
overflow-y: auto;
}
</style>
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script>
$(function() {
$('#as1').on('scroll click', function() {
alert('as1')
})
$('#as2').on('scroll, click', function() {
alert('as2')
})
});
</script>
</head>
<body>
<div id="as1"><p>dsfs</p><p>vcvcxvx</p><p>dsfsdfs</p>pfdfd</p><p>fjksdfls</p><p>dsfsdfs</p>pfdfd</p><p>fjksdfls</p></div>
<div id="as2"><p>dsfs</p><p>vcvcxvx</p><p>dsfsdfs</p>pfdfd</p><p>fjksdfls</p><p>dsfsdfs</p>pfdfd</p><p>fjksdfls</p></div>
</body>
</html>
Да вроде бы ничего не просмотрел ) |
Я по отдельности естественно тоже события пробовал. Click работает, scroll нет
События, если указывается несколько, пишутся через пробел, а элементы, которым они задаются, через запятую. Другого способа я не знаю, судя по источнику его и нет. ) |
laaf,
просто у вас разметка не правильная, воможно... <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
#divcont {
width: 300px;
height: 300px;
border: 1px dashed #ccc;
overflow-y: scroll;
}
#divcont > div {
height: 500px;
}
</style>
<div id="divcont"></div>
<script>
var divcont = $('#divcont');
$('<div>', {
id: 'div_skndb',
text: 'inner'
})
.appendTo(divcont);
divcont.on('scroll click',function(){
alert('scroll');
});
</script>
|
Здесь элементы постоянные, присутствуют в разметке html. У меня элемент со скролом создается на лету через append.
Тут ключевое не понятно, как может одно событие работать, а второе нет. |
laaf,
может у #div_skndb нет скрола а есть у его родителя |
Этот пример про меня. Ок. Спасибо. Посмотрю, может все-таки чего не так сделал. Но ведь события по разному отрабатывают, блин!
|
Нет, скрол у него. Первое, что проверил. Там дальше внутри таблица уже без скрола, которая визуально и прокручивается через этот div.
|
Вот для аппенднутого.)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
#divcont {
width: 300px;
height: 300px;
border: 1px dashed #ccc;
overflow: hidden;
}
</style>
<div id="divcont"></div>
<script>
var divcont = $('#divcont');
$('<div>', {
id: 'div_skndb',
text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia explicabo facilis, adipisci recusandae est impedit fuga eveniet iusto aut excepturi quibusdam, omnis totam similique quod repudiandae eaque soluta ipsa accusamus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, placeat, minus dolores est, minima blanditiis quisquam at earum quos veniam ad non necessitatibus ut cumque et soluta eveniet quidem consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea placeat ipsam perferendis dicta, optio facilis ad maxime ab nobis, nesciunt! Provident ab, perspiciatis ipsa neque omnis explicabo rem voluptatibus. Dolore magnam modi, voluptas aliquid! Fugiat soluta accusamus eius nam iste voluptas eum sapiente nulla, doloremque quas, reprehenderit deleniti quod, animi aperiam debitis quae! Voluptates, libero! Deserunt reiciendis tempore inventore non nostrum, quod blanditiis ipsum voluptas quos, itaque corporis ipsa quas nobis magnam eius provident expedita alias voluptatem, quam iure enim beatae magni! Velit dolor, provident facilis a delectus dicta voluptatem error minus dignissimos non culpa sequi labore, totam, laboriosam, repellendus omnis officiis fugiat tempora molestiae corporis sint quam. Vero nobis repudiandae quos at, temporibus suscipit vitae est! Esse tempore cupiditate eos, exercitationem impedit officiis debitis blanditiis dolor vitae reprehenderit? Dicta porro adipisci soluta voluptatum maxime, odit omnis magni esse nam eius asperiores illum vero inventore, voluptatibus reprehenderit nobis quidem quos quas. Magni nemo minima necessitatibus qui totam dolor fugit. Sequi blanditiis repudiandae quam aperiam quaerat eveniet natus ullam et ipsum a! Vero sapiente impedit, laboriosam ipsam repellendus nemo eum necessitatibus velit voluptate, sunt aut optio voluptates hic excepturi atque, illo assumenda earum harum a expedita alias accusantium dolore dicta ullam!!'
})
.css({'overflow-y':'scroll', 'height': '100%'})
.appendTo(divcont);
$('#div_skndb').on('scroll click',function(){
alert('scroll');
});
</script>
|
вопрос к знатокам скорее всплывает ли scroll -- если нет тогда делегирование отпадает
|
Нет, не всплывает. Это его вторая ошибка.
|
Я что-то туплю. Какие две ошибки у меня?
|
1) Не верно заданы типы событий, не через пробел, а через запятую.
2) Делегирование события родителю, при этом click всплывает и обрабатывается, а scroll не всплывает, и нет обработки. Вам надо типа $(element).appendTo(obj).on('event event', function() .... |
Спасибо большое. Буду разбираться.
|
laaf,
вставили элемент потом после вставки присвоили ему обработку скрола |
Все получилось! Ключевым моментом является то, что событие надо прикручивать сразу(!) после вставки, а не в другом месте кода. По крайней мере, в моем случае это помогло.
Только мне осталось непонятно, почему click и scroll по разному себя ведут в моей конфигурации разметки и кода. Возможно, ответ "потому что" (типа по определению), но не приходилось про это нигде читать. Спасибо за помощь! |
Ключевым моментом является то, что событие надо прикручивать сразу(!) после вставки
Это не так - ключевым (и ответом на "осталось непонятно, почему click и scroll по разному") является то, что событие onscroll должен обрабатывать объект источник, а назначит его можно и не сразу после вставки, а и спустя время. |
| Часовой пояс GMT +3, время: 01:52. |