JavaScript不影响div

Question

I'm trying to build an FAQ page and wish to have the user click a question and only then an answer will side down under the question. I have code that will work this when I put it all on one page. However I wish to use a div to load various files (the FAQ div is only one of a few files I wish to add into the div). So when I use the div and an 'window onload event' the div loads but all questions and answers are fully opened and exposed. The script to dropdown answers, placed in the HEAD section of the MainPage.html also a call to 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>

The 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>

The script to load the div, placed in the HEAD section of the MainPage.html

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

The div, placed in the BODY section of the MainPage

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

I have tried placing the javascript in various place on the page but still the same result. Repeat: If I place the code of FAQ.html directly in the BODY section of the MainPage it all works properly.

I have researched this also under 'conflicting jQuery' but with no success. Suggestions appreciated please.

Answer 1

It looks a lot like $(document).ready is run before $('#target').load finishes.
To avoid that, take the entire function you pass to $(document).ready and pass it as a last argument to $('#target').load instead, so that it gets called when loading of FAQ.html has completed:

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);
            });
        });
    });
}

Answer 2

I assume it's because of the

$(document).ready()

callback. You're specifying a function to happen when the DOM is loaded, but by the time you've loaded in the faq.hmtl file, that's already happened . See what happens if you remove the first and last lines inside your script tags.

---

Also, unrelated, you're using <h1> tags incorrectly. You should only have one <h1> tag per page, as a rule. The <dl> tag is probably the most semantically meaningful in this situation.