javascript - 委托(delegate)事件处理程序不起作用

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 中的事件委托(delegate)”的一些示例，因此我编写了上面的函数。可能是错误的，因为当我点击时，它没有执行任何操作。它只是在当前 URL 末尾添加一个 #。

谁能告诉我这里出了什么问题吗？为什么当我点击#profile_export时没有触发对“profile/export/”的请求？

谢谢

Answer 1

您使用.profile作为主要选择器是问题所在。您需要将委托(delegate)事件处理程序挂接到页面加载时 DOM 中的元素。例如:

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

请注意，这里的document只是为了举例。理想情况下，您应该使用最接近的可用元素，在这种情况下，我认为它是您要附加 _profile 模板的元素。