Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / div onclick - jquery / 8 сообщений из 8, страница 1 из 1
12.12.2012, 01:45
    #38075049
mvn3
mvn3
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
div onclick - jquery
Всем привет. У меня на странице есть статический 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:51
    #38075051
MikkiMouse
MikkiMouse
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
div onclick - jquery
mvn3,

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

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

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

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



Результат тот же. на старом все ок на новых нет. или я что-то не так понял?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.12.2012, 02:04
    #38075059
Паганель
Паганель
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
div onclick - jquery
mvn3или я что-то не так понял?Direct and delegated events
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.12.2012, 02:48
    #38075071
IDVsbruck
IDVsbruck
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
div onclick - jquery
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, 04:15
    #38075080
MikkiMouse
MikkiMouse
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
div onclick - jquery
IDVsbruck,

Много умного написали, но все проще - вот рабочий примерчик . И on() как раз вешает хендлер не только на существующие элементы.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.12.2012, 09:08
    #38075155
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
div onclick - jquery
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:09
    #38075156
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
div onclick - jquery
MikkiMouse, а ссылку на документацию дали Вы
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / div onclick - jquery / 8 сообщений из 8, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 490ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1448986]:
 0ms
get settings:
 7ms
get forum list:
 10ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 179ms
get topic data:
 9ms
get forum data:
 2ms
get page messages:
 43ms
get tp. blocked users:
 1ms
others: 235ms
total:  490ms
x
x
Закрыть


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