Perform functions on loaded html div from external html

Question

I am new to jQuery, and I loaded a div from an external HTML page and I wanted to perform functions such as click, hide, show, etc. The problem is that I tried to put the functions which I wanted to accomplish in the HTML pages script but they did not work. I see the div of #helpPage loaded.

The HTML page:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" >
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js">    </script>
    <script>
        $(document).ready(function(){
            $( "#loadHelpHere" ).load( 'help.html #helpPage' );
            $('#helpSection div').not(".helpDiv").hide();
            $('.justClick').bind('click', function() {      
                $('#helpSection div').not(".helpDiv").hide();
                $('#helpSection div.helpDiv').html($('#helpSection div.helpDiv' + ($(this).index()+1)).html());
            });
        });
    </script>
    <style>
        #helpMenu ul li{margin: 0 0 5px 0;}
    </style>
</head>
<body>
    <div id="loadHelpHere"></div>
</body>
</html>

That is what was loaded into the div from the external HTML page:

 <div id="helpPage">
        <div id="helpMenu">
            <header>Help Documentation</header>
            <article>
                <h4>Help Menu</h4>
                <ul id="menu">          
                    <li class="current_page_item justClick"><a href="#" data-id="div1">Help Section 1</a></li>
                    <li class="justClick"><a href="#" data-id="div2">Help Section 2</a></li>
                    <li class="justClick"><a href="#" data-id="div3">Help Section 3</a></li>
                </ul>
            </article>
        </div>
        <div id="helpSection">
            <div class="helpDiv">
                <header>Help Documentation</header>
                <article>
                    Works!
                </article>
            </div>
            <div class="helpDiv1">
                <header>Help Documentation content 1</header>
                <article>
                    Help Section 1
                </article>
            </div>
            <div class="helpDiv2">
                <header>Help Documentation content 2</header>
                <article>
                    Help Section 2
                </article>
            </div>
            <div class="helpDiv3">
                <header>Help Documentation content 3</header>
                <article>
                    Help Section 3
                </article>
            </div>
        </div>
    </div>

Any help is appreciated.

possible duplicate of [Direct vs. Delegated - jQuery .on()](http://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on) — Popnoodles, Sep 29 '15 at 16:34

score 0 · Accepted Answer · answered Sep 29 '15 at 16:14

0

Event delegation is what you want to use for HTML elements that are dynamically loaded into the DOM. The .on() method is the place to start.

Example

$(document).on('click', '.justClick', function(e){
    $('#helpSection div').not(".helpDiv").hide();
    $('#helpSection div.helpDiv').html($('#helpSection div.helpDiv' + ($(this).index()+1)).html());
});

Any questions?

answered Sep 29 '15 at 16:14

wrxsti

3,434
1
18
30

Can we please flag as duplicate rather than have yet another answer about event delegation? – Popnoodles Sep 29 '15 at 16:33

Perform functions on loaded html div from external html

1 Answers1