javascript不影响div

Question

我正在尝试构建一个常见问题解答页面，并希望让用户点击一个问题，然后答案才会出现在问题下方。当我把它全部放在一页上时，我有代码可以工作。但是我希望使用 div 来加载各种文件(FAQ div 只是我希望添加到 div 中的几个文件之一)。因此，当我使用 div 和“窗口加载事件”时，div 加载但所有问题和答案都已完全打开和公开。下拉答案的脚本，放置在 MainPage.html 的 HEAD 部分，也是对 jQuery 的调用。

<script type="text/javascript">
$(document).ready(function() {
    $('#faqs h1').each(function() {
        var tis = $(this), state = false, answer = tis.next('div').hide().css('height','auto').slideUp();
        tis.click(function() {
            state = !state;
            answer.slideToggle(state);
            tis.toggleClass('active',state);
        });
    });
});
</script>

FAQ.html

<div id="faqs">    
    <h1>+ Question</h1>
    <div>
        <p><br>Answer Here</p>
    </div><br>

    <h1>+ Question</h1>
    <div>
        <p><br>Answer Here</p>
    </div><br>

</div>

加载div的脚本，放在MainPage.html的HEAD部分

<script>
    window.onload = function(){
        $('#target').load('FAQ.html');
    }
</script>

div，放在主页的正文部分

<div id="target"></div>

我已经尝试将 javascript 放在页面上的不同位置，但结果仍然相同。重复:如果我将 FAQ.html 的代码直接放在 MainPage 的 BODY 部分，它就可以正常工作。

我也在“冲突的 jQuery”下对此进行了研究，但没有成功。请提出建议。

Answer 1

看起来很像 $(document).ready 在 $('#target').load 完成之前运行。
为避免这种情况，将传递给 $(document).ready 的整个函数传递给它 as a last argument to $('#target').load相反，它会在 FAQ.html 加载完成时被调用:

window.onload = function(){
    $('#target').load('FAQ.html', function() {
        $('#faqs h1').each(function() {
            var tis = $(this), state = false, answer = tis.next('div').hide().css('height','auto').slideUp();
            tis.click(function() {
                state = !state;
                answer.slideToggle(state);
                tis.toggleClass('active',state);
            });
        });
    });
}