Событие Click не запускается после изменения DOM в jQuery

Я пытаюсь закодировать кнопку ADD & DELETE на HTML-странице, чтобы удалить или добавить код изображения на странице. Кнопка УДАЛИТЬ удалит первое изображение перед кнопкой. Кнопка «ДОБАВИТЬ» вставит новое изображение на HTML-страницу, а кнопка «Удалить» — на изображение.

Код работает нормально: он удаляет изображение при нажатии кнопки DELETE и вставляет изображение при нажатии кнопки ADD. Проблема в том, что кнопка удаления, вставленная после нажатия кнопки ДОБАВИТЬ, не работает. Поэтому, если вы нажмете кнопку ДОБАВИТЬ, а затем нажмите кнопку УДАЛИТЬ, изображение не скроется; событие клика не срабатывает.

Вот код:

<html>
    <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>  
    <script type="text/javascript">

        $(document).ready(function(){
            $('.img-post input').after('<button type="button" >Delete</button>');

            $(".img-post button").click(function() {
                    $(this).prev().prev().remove();
                    $(this).prev().remove();
                    $(this).remove();
            });

            $(".add-img button").click(function() {
                    $('<img  src="image3.jpg" /><input type="hidden" name="allimages[]" value="image3.jpg" /><button type="button" >Delete</button><br />').appendTo('.img-post');
            });

        });


        </script>   
    </head>
    <body>
            <div class="img-post">
                <img  src="image1.jpg" /><input type="hidden" name="allimages[]" value="image1.jpg" /><br />
                <img  src="image2.jpg" /><input type="hidden" name="allimages[]" value="image2.jpg" /><br />
            </div>

            <div class="add-img">
                <button type="button" >Add image</button>
            </div>

    </body>
</html>

jquery jquery-click-event
person usef_ksa    schedule 06.10.2011    source источник

Ответы (4)


arrow_upward
9
arrow_downward

Привяжите обработчик события к событию нажатия кнопки, используя live() вместо click():

$(".img-post button").live('click', function() {
    $(this).prev().prev().remove();
    $(this).prev().remove();
    $(this).remove();
});

Это гарантирует, что все кнопки, соответствующие вашему селектору, которые добавляются после первоначальной загрузки DOM, также будут запускать ту же функцию.

http://api.jquery.com/live/

person RoccoC5    schedule 06.10.2011
comment
Обратите внимание, что эта функция удалена с jQuery 1.9. - person ; 03.04.2015

arrow_upward
3
arrow_downward

Вместо этого используйте live:

$(".img-post button").live('click', function() { ...
person Clive    schedule 06.10.2011

arrow_upward
3
arrow_downward

Вы должны изменить свои обработчики .click(fn) на .live("click", fn). Ваши обработчики .click() работают только с элементами, которые находятся на странице во время document.ready. Элементы, которые вы добавляете динамически, тогда не присутствовали, поэтому у них нет обработчиков кликов.

.live(), с другой стороны, просматривает клики на верхнем уровне, а затем проверяет их, чтобы увидеть, были ли они нажаты на соответствующий объект, и БУДЕТ ли работать с объектами, которые динамически добавляются на страницу после запуска вашего кода инициализации. .live() работает только с некоторыми событиями (событиями, которые всплывают), но щелчок — одно из них, с которым он работает.

    $(document).ready(function(){
        $('.img-post input').after('<button type="button" >Delete</button>');

        $(".img-post button").live("click", function() {
                $(this).prev().prev().remove();
                $(this).prev().remove();
                $(this).remove();
        });

        $(".add-img button").live("click", function() {
                $('<img  src="image3.jpg" /><input type="hidden" name="allimages[]" value="image3.jpg" /><button type="button" >Delete</button><br />').appendTo('.img-post');
        });

    });
person jfriend00    schedule 06.10.2011

arrow_upward
3
arrow_downward

Попробуйте использовать функцию jQuery live. Это привяжет обработчик кликов к элементам, которые соответствуют вашему селектору, даже если они не существуют в DOM при первоначальной загрузке вашей страницы (что имеет место в вашем примере).

person Rob Sobers    schedule 06.10.2011