Делегированный обработчик событий не работает

Question

Это часть моего файла HTML;

<script type="text/template" id="_profile"> 
    <div class="modalDialog"> 
     <div class="profile"> 
      <div class="box clearfix"> 
       <div class="box-header clearfix"> 
        <span class="box-title l">{% trans 'PROFILE' %}</span> 
        <a href="#" style="margin-left: 10px;" id="profile_export" class="l"><span class="icon-download"></span>{% trans 'Profile Export' %}</a> 
        <div class="close-profile icon-cancel-circled r"></div> 
       </div> 

и

$('.profile').on('click', '#profile_export', function (e) { 
    e.preventDefault(); 
    $.get(root + '/profile/export/', function(resp) { 
     // DO something 

Я посмотрел на некоторые примеры для «делегирования событий в JQuery», так что я писал выше функции. Наверное, это неправильно, потому что, когда я нажимаю, ничего не делает. Он просто помещает # в конец текущего URL-адреса.

Может ли кто-нибудь сказать мне, что здесь не так? Почему, когда я нажимаю #profile_export, не вызывает ли запрос «профиль/экспорт /»?

Спасибо

Answer 1

Использование .profile в качестве основного селектора является проблемой. Вам нужно связать делегированный обработчик событий с элементом, находящимся в DOM при загрузке страницы. Например:

$(document).on('click', '#profile_export', function (e) { 
    e.preventDefault(); 
    // your code... 
}); 

Обратите внимание, что document здесь только ради примера. В идеале вы должны использовать ближайший элемент, в этом случае я бы предположил, что это элемент, к которому вы добавляете свой шаблон _profile.

Answer 2

Нельзя делегировать ни одному элементу, если этот элемент не удаляется или не добавляется динамически.

Если это не так, вы должны пойти:

$('#profile_export').on('click' function (e) { 

});