Не работает событие click для контента добавленного через append

Тема в разделе "JavaScript", создана пользователем verfaa, 4 май 2012.

Модераторы: ZiX
  1. verfaa

    verfaa

    Регистр.:
    29 янв 2007
    Сообщения:
    373
    Симпатии:
    41
    Всем привет. Появилась проблема при работе с JQuery:
    В div добавляю методом append контент с картинками.
    Код:
    $('#photos_from_webcamera').append("<div class=\"webcam_photo\" data-id=\"" + msg.url + "\"><a target=\"_blank\" href=\"" + msg.url + "\"><img style=\"margin-bottom:4px;\" src=\"" + msg.thumbnail + "\"/></a><img class=\"delwebcamimg\" style=\"cursor:pointer\" src=\"images/webcam_img_delete.png\"/></div>").fadeIn();
    В шапке скрипт, который при клике по добавленной картинке должен выполнять действие, скажем показывать алерт:
    Код:
    $(document).ready(function() {
     
    $("#photos_from_webcamera img").click(function() {
        alert("Click!!! in webcam imgs");
     
    });
     
     
    });
    Но он не работает! Контент нормально добавляется на страницу, но при клике по картинке ничего не происходит! Причем, если выбрать в набор элемент, который уже был изначально на странице, то для него алерт выдается. Не работает событие клик только для картинок, которые динамически добавляются на страницу методом append. Помогите разобраться в чем проблема и как правильно сделать, намучился уже пипец(
     
  2. Viodele

    Viodele Механик

    Administrator
    Регистр.:
    17 дек 2011
    Сообщения:
    110
    Симпатии:
    480
    И не должно. Для любых DOM структур, которые генерируются после события ready нужно использовать методы live и bind.
    Код:
    $("#photos_from_webcamera img").live('click', function() {
        alert("Click!!! in webcam imgs");
    });
     
    verfaa и latteo нравится это.
  3. indacircus

    indacircus Создатель

    Регистр.:
    18 окт 2011
    Сообщения:
    16
    Симпатии:
    2
    Можно использовать window-load конструкцию.
    Код:
    $(window).load(function(){
        $("#photos_from_webcamera img").click(function() {
            alert("Click!!! in webcam imgs");
        });
    });
     
  4. Viodele

    Viodele Механик

    Administrator
    Регистр.:
    17 дек 2011
    Сообщения:
    110
    Симпатии:
    480
    Нет, не можно. Эффект будет нулевым.
     
  5. indacircus

    indacircus Создатель

    Регистр.:
    18 окт 2011
    Сообщения:
    16
    Симпатии:
    2
    Код:
    jQuery(window).load(function(){
            jQuery('div.phocagallery-box-file-third').hover(function(){
                jQuery('div.shadow-over-pic', this).hide();
            }, function(){
                jQuery('div.shadow-over-pic', this).show();
            });
        });
    Пример кода с разрабатываемого проекта :) Отлично справляется с элементами добавленными в DOM javascript'ом