Question

我有这段代码：

<script src="support/jquery-2.0.3.min.js" type="text/javascript" bdHarset="utf-8"></script>
<script type="text/javascript">

$(document).ready( function() {

    $('body').load('externalFile.html');

    $(window).bind("load", function() {

        $('#targetBtn').click(function() {
            console.log(
                'click function'
            );
        });

    });

});

</script>

* #targetBtn是externalFile.html

中的对象

“点击功能”不会触发，除非我在负载的回调中使用它：

$('body').load('externalFile.html', function() {
    $('#targetBtn').click(function() {
        console.log(
            'click function'
        );
    });
});

但是在我的项目中，需要驻留在$（window）.bind中的元素才能使它们正常工作，这就是为什么我希望在$（window）.bind中基本上拥有所有JS的原因。 ...

有没有办法逻辑地解析这个代码结构，使它类似于我的第一个例子，并且仍然有“点击功能”处理通过加载从外部源引入的对象？

Answer 1

是的，通过委派事件处理程序：

$(document).ready( function() {
    $(document).on('click', '#targetBtn', function() {
        console.log('click function');
    });

    $('body').load('externalFile.html');
});

从jQUERY访问对象加载外部html而不加载回调

1 个答案: