Событие щелчка не запускается после изменений DOM в jQuery - PullRequest
Новая
       33

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

3 голосов
/ 06 октября 2011

Я пытаюсь кодировать кнопку ДОБАВИТЬ И УДАЛИТЬ на странице HTML, чтобы удалить или добавить код изображения на странице.Кнопка УДАЛИТЬ удалит первое изображение перед кнопкой.Кнопка ADD вставит новое изображение на страницу 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>

Ответы [ 4 ]

9 голосов
/ 06 октября 2011

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

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

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

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

3 голосов
/ 06 октября 2011

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

3 голосов
/ 06 октября 2011

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

.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');
        });

    });
3 голосов
/ 06 октября 2011

Используйте live вместо: 

$(".img-post button").live('click', function() { ...
...