Функция при нажатии не работает

Question

Функция при нажатии не работает

0

Я должен использовать динамически созданные изображения для моего проекта. Я делаю это с помощью jQuery:

var img = $('<img />').attr({ 'id': i, 'src': e.files[i].thumbnails["200x200"], 'alt':e.files[i].name, 'class': 'photo'}).appendTo($('#img'));

Но я не могу запустить функцию, если щелкнуть изображение. Я пытался:

$(document).ready(function() {
    $(".photo").click(function(){
        alert('Works!');    
    });
};

и onClick:

var img = $('<img />').attr({ 'id': i, 'src': e.files[i].thumbnails["200x200"], 'alt':e.files[i].name, 'class': 'photo', 'onClick': 'test();' }).appendTo($('#img'));

[...]

function test(){
   alert('Works!');
}

Но оба пути не работают... Что я не так?

custi 03 окт. 2013, в 21:48

Источник

Теги:

javascript

jquery

dynamic

onclick

jquery-click-event

3 ответа

0

Просто добавьте обработчик событий при создании изображения?

var img = $('<img>')
            .attr({
                id: i,
                src: e.files[i].thumbnails["200x200"],
                alt: e.files[i].name,
                // keep 'class' for jshint 
                'class': 'photo'
            })
            .click(function () {
                alert('Works!');
            })
            // you can leave out $('#img') and just write:
            .appendTo('#img');

конечно, вы должны определить функцию обработчика щелчка только один раз:

function clickHandler() { // do stuff }

и добавьте его как .click(clickHandler) в примере выше.

jukempff 03 окт. 2013, в 17:50

0

Когда вы это сделаете

$(".photo").click(function(){
    alert('Works!');    
});

он привязывает его только к элементам в dom, поэтому, как только вы добавляете динамический html, он не связывает это даже с этим html. В этом случае, если вы используете

$(document).on('click','.photo',function(){
  alert('Works');
});

Этот код привяжет событие click к каждому элементу в html, даже если он будет добавлен динамически.

Caner Akdeniz 03 окт. 2013, в 17:47

Ещё вопросы

Anton · Accepted Answer · 2013-10-03T16-40-00.000Z

Попробуйте это, вам нужно использовать on() и делегировать на ближайший статический родительский элемент для динамически добавленных элементов

    $(document).on('click','.photo',function(){
        alert('Works!');    
    });