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

$.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-адресу, а не к функции ссылки, на которую нажали.

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

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


jquery hyperlink bind jquery-click-event
person Aaron Murray    schedule 07.03.2012    source источник
comment
на данный момент: 1.3.0 (google cdn)   -  person Aaron Murray    schedule 08.03.2012
comment
к вашему сведению, я изменил его на 1.7.1 и все еще получаю те же результаты.   -  person Aaron Murray    schedule 08.03.2012
comment
я бы изменился, чтобы использовать on вместо live.   -  person Daniel A. White    schedule 08.03.2012
comment
Я переключился на on, и это тот же результат, однако теперь предупреждение отображается правильно, но оно по-прежнему перенаправляется на страницу, а не остается на текущей страница   -  person Aaron Murray    schedule 08.03.2012

Ответы (2)


arrow_upward
3
arrow_downward

В дополнение к тому, что говорит @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;
});
person Jeff B    schedule 07.03.2012
comment
Хорошо, это позаботилось об этом, иногда я думаю о линейности, когда работаю с частями, но работаю с элементами. Время от времени я забываю отступить и посмотреть на общую картину. Я не уверен, почему он переходил на страницу «ссылка», когда я возвращал false, но, перемещая вещи и прикрепляя событие к телу таким образом, сработало отлично, спасибо вам и @charlietfl - person Aaron Murray; 08.03.2012

arrow_upward
2
arrow_downward

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

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

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

person charlietfl    schedule 07.03.2012