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) {

});

委托事件处理程序不起作用

2 个答案: