jQuery 在花哨的盒子 ajax 中不工作 - 初始化问题

Question

这是我打开一个通过ajax加载页面的Fancybox的代码：

$('tr.record').click(function() {
    var record_id = $(this).attr("id");
    var link = 'http://' + window.location.hostname + '/expenses/expenses_edit/' + record_id;
    $.fancybox({
        'transitionIn': 'fade',
        'transitionOut': 'none',
        'type': 'ajax',
        'href': link,
        'onClosed': function() {
            parent.location.reload(true);
        }
    });
    $.bind("submit", function() {

        $.fancybox.showActivity();

        $.ajax({
            type: "POST",
            cache: false,
            data: $(this).serializeArray(),
            success: function(data) {
                $.fancybox(data);
            }
        });
        return false;
    });
});

fancybox内的页面有一个表单，其中包含一个带有字符计数器的文本字段：

<form>
...

<textarea name="exp_det" cols="90" rows="12" id="exp_det"></textarea>
<span id="charLeft">150</span> characters left

</form>

父页面通过标题加载此内容：

$('#ext_det').keyup(function() {
    var len = this.value.length;
    if (len >= 150) {
        this.value = this.value.substring(0, 150);
    }
    $('#charLeft').text(150 - len);
});

所以问题是这个字符计数器（和其他jQuery 的东西（如验证、日期选择器）在 Fancybox 中不起作用。如果页面在没有 Fancybox 的情况下加载，或者通过 Fancybox 作为内联加载，它们确实可以工作。

我知道这似乎是一个相当常见的问题，但我尝试了所有解决方案，但没有一个对我有用。

我尝试过

• 对 ajax 页面使用不同的 ID，
• 将字符计数脚本放置在 ajax 页面的末尾（它甚至没有
• 在 Firebug 上显示），
• 中的函数放置
• 将字符计数脚本作为 success other 疯狂迭代

这个问题似乎与 ajax 页面加载后重新初始化 jQuery 函数有关，因为加载父页面时这些元素不存在。

有什么建议吗？

Answer 1

在精美的框中加载内容后，您需要重新绑定事件处理程序，或者使用 JQuery.live 事件绑定机制。你的问题发生是因为你的事件处理程序正在尝试绑定到尚未加载的 DOM 节点，所以你需要做的是使用 JQuery.live，它将事件绑定到元素，即使它们尚未加载或使用当您的 fancybox 内容已加载以绑定事件处理程序时的回调函数。

$(document).ready(function() {
    $('#ext_det').live('keyup', function() {

        // code to execute on keyup for element with id #ext_det    

    });
});