Проблемы с привязкой событий к динамически создаваемым элементам с помощью jQuery - PullRequest
Новая
       23

Проблемы с привязкой событий к динамически создаваемым элементам с помощью jQuery

1 голос
/ 08 марта 2012 
$.each(data, function(i,data) {
...[cut]...
    +"<a id=\"contact_"+data.id+"_delete\" href=\"/user/contact/delete/ticket_id/"+data.ticket_id+"/contact_id/"+data.id+"\">Delete</a>"
...[cut]...
    $("#contact_"+data.id+"_delete").live('click',function() {
        var href = this.attr('href');
        alert(href);
        return false;
    });

У меня есть следующий пример кода (несущественные части вырезаны для простоты). У меня есть функция, которая перерисовывает строки (tr) таблицы. Каждая строка имеет ссылку «удалить» в конце строки, которая вызывает url / user / contact / delete / ticket_id / {$ ticket_id}

Затем (в том же цикле) я хочу привязать событие щелчка к вновь созданной ссылке. Однако, когда я нажимаю на ссылку, браузер покидает страницу и переходит к URL, а не к функции по нажатой ссылке.

Во-первых, правильно ли я связываю событие click?

Во-вторых, правильно ли я получаю атрибут href элемента?

Ответы [ 2 ]

3 голосов
/ 08 марта 2012

В дополнение к тому, что говорит @charlietfl, у вас может быть один обработчик для всех ваших удаляемых элементов. Просто добавьте к ним один и тот же класс, например class="contact_delete", а затем используйте .on(), чтобы нацелить их всех: 

+'<a class="contact_delete" id="contact_'+data.id+'_delete" ...

Обратите внимание, что если вы используете одинарные кавычки, вам не нужно избегать всех ваших двойных кавычек. 

$('body').on('click', '.contact_delete', function() {
    var href = $(this).attr('href');
    alert(href);
    return false;
});
2 голосов
/ 08 марта 2012

Вам нужно обернуть «this» в $ (), чтобы сделать его объектом jQuery, чтобы использовать методы jQuery 

 var href = $(this).attr('href');

live () устарела (но работает в 1.7.1), поэтому вы должны рассмотреть возможность использования более текущего метода on ()

...