ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / div onclick - jquery
8 сообщений из 8, страница 1 из 1
div onclick - jquery
    #38075049
mvn3
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mvn3
Гость
Всем привет. У меня на странице есть статический div у которого есть класс container.

Код: html
1.
2.
3.
<div class="main" id="workspace">
       <div id="container" class="container"> root</div>
</div>



мне нужно при нажатии на div выводить алерт аля Hello World.
Код: javascript
1.
2.
3.
4.
5.
6.
$(document).ready(function() {
           $("div.container").click(function(){
                console.log("click");
                alert("click");
            });
});


Тут все работает ОК.

Далее, добавляем на страницу статическую кнопку
Код: html
1.
<button id="new">New div</button>&#8203;<br/><br/>


Добавляем обработчик онклик, на все ДИВы которые имеют класс container
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
$(document).ready(function() {
            $("#new").click(function(){
                var containerId = "container_" + index; 
                $("#workspace").append(
                    "<div id='" + containerId +"'class='container'></div><br/><br/>"
                );
                index++;
            });

            $("div.container").click(function(){
                console.log("click");
                alert("click");
            });
 });



Результат: при клике на 1-м диве (статическом) все ок, а на новых не рабоает. Почему?
...
Рейтинг: 0 / 0
12.12.2012, 01:45
| Ответить | Цитировать | Написать  
div onclick - jquery
    #38075051
MikkiMouse
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
MikkiMouse
Участник
mvn3,

http://api.jquery.com/on/
...
Рейтинг: 0 / 0
12.12.2012, 01:51
| Ответить | Цитировать | Написать  
div onclick - jquery
    #38075054
mvn3
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mvn3
Гость
MikkiMousemvn3,

http://api.jquery.com/on/

Спасибо за ответ,

Код: javascript
1.
2.
3.
$("div.container").on("click", function(event){
                alert('test');
            });



Результат тот же. на старом все ок на новых нет. или я что-то не так понял?
...
Рейтинг: 0 / 0
12.12.2012, 01:57
| Ответить | Цитировать | Написать  
div onclick - jquery
    #38075059
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Паганель
Участник
mvn3или я что-то не так понял?Direct and delegated events
...
Рейтинг: 0 / 0
12.12.2012, 02:04
| Ответить | Цитировать | Написать  
div onclick - jquery
    #38075071
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IDVsbruck
Участник
mvn3Результат тот же. на старом все ок на новых нет. или я что-то не так понял?
Все так. Только даже триггер .on() надо назначать существующему элементу. Отличие: он сработает даже если элемент еще не в ДОМе, тогда как .bind() только существующему в документе.

Я бы на твоем месте сделал примерно так:
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
$(document).ready(function(){
    $("#new").click(function(){
        $("#workspace").append($("<div/>").attr("id", "container_" + index++).addClass("container").click(clickHandler)).append("<br/><br/>");
    });
    $("div.container").click(clickHandler);
 });
function clickHandler(){
    console.log("click");
    alert("click");
}
...
Рейтинг: 0 / 0
12.12.2012, 02:48
| Ответить | Цитировать | Написать  
div onclick - jquery
    #38075080
MikkiMouse
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
MikkiMouse
Участник
IDVsbruck,

Много умного написали, но все проще - вот рабочий примерчик . И on() как раз вешает хендлер не только на существующие элементы.
...
Рейтинг: 0 / 0
12.12.2012, 04:15
| Ответить | Цитировать | Написать  
div onclick - jquery
    #38075155
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
MikkiMouse, дак Паганель уже ответил: нужно прочитать параграф "Direct and delegated events" в документации .

Понять, что такое direct or directly-bound events :
Код: javascript
1.
$('div.container').on('click', clickHandler);

и delegated events :
Код: javascript
1.
$(document).on('click', 'div.container', clickHandler);

или
Код: javascript
1.
$('#workspace').on('click', 'div.container', clickHandler);


И не пропустить следующее:Direct and delegated eventsIf new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler, as described next.

И далее по тексту...
RTFM, короче
...
Рейтинг: 0 / 0
12.12.2012, 09:08
| Ответить | Цитировать | Написать  
div onclick - jquery
    #38075156
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
MikkiMouse, а ссылку на документацию дали Вы
...
Рейтинг: 0 / 0
12.12.2012, 09:09
| Ответить | Цитировать | Написать  
8 сообщений из 8, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / div onclick - jquery
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38075059&tid=1448986]:
 0ms
get settings:
 10ms
get forum list:
 12ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 181ms
get topic data:
 12ms
get forum data:
 3ms
get page messages:
 62ms
get tp. blocked users:
 2ms
others: 243ms
total:  533ms
созд. / загр.: 533ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]