Problem description
There is A complicated HTML clip (A). If you embed this HTML clip into other pages (B, C, D ....).
The key issue is that a large number of JavaScript logic needs to be processed in HTML fragments, such as paging and click event response.
We use a simple example to illustrate this problem:
"There is a button on the page. Click this button to introduce an HTML clip, which contains a paging button ."
1. Use IFrame
On the homepage, click a button to introduce an IFrame to the page:
Copy codeThe Code is as follows: <script type = "text/javascript">
$ (Function (){
$ ("# ClickToInsert"). click (function (){
$ ("# Placeholder" pai.html ('<iframe src = "iframe.htm"> </iframe> ');
});
});
</Script>
<Input type = "button" id = "clickToInsert" value = "Insert HTML"/>
<Div id = "placeholder">
</Div>
IFrame page to simulate paging:
<Script type = "text/javascript">
$ (Function (){
Var parent = $ ("# complex_page_segment ");
$ (". Previous", parent). click (function (){
$ (". Content", parent).html ("Previous Page Content ");
});
$ (". Next", parent). click (function (){
$ (". Content", parent).html ("Next Page Content ");
});
});
</Script>
<Div id = "complex_page_segment">
<Input type = "button" value = "Previous Page" class = "previous"/>
<Input type = "button" value = "Next Page" class = "next"/>
<Div class = "content">
Page Content </div>
</Div>
2. AJAX returns the page snippet and registers the event
Note: We use textarea to simulate returned HTML fragments.
Copy codeThe Code is as follows: <script type = "text/javascript">
$ (Function (){
$ ("# ClickToInsert"). click (function (){
$ ("# Placeholder" cmd.html ($ ("# clone"). val ());
Var parent = $ ("# complex_page_segment ");
$ (". Previous", parent). click (function (){
$ (". Content", parent).html ("Previous Page Content ");
});
$ (". Next", parent). click (function (){
$ (". Content", parent).html ("Next Page Content ");
});
});
});
</Script>
<Input type = "button" id = "clickToInsert" value = "Insert HTML"/>
<Div id = "placeholder">
</Div>
<Textarea id = "clone" style = "display: none;">
<Div id = "complex_page_segment">
<Input type = "button" value = "Previous Page" class = "previous"/>
<Input type = "button" value = "Next Page" class = "next"/>
<Div class = "content"> Page Content </div>
</Div>
</Textarea>
Because we need to reference the same HTML segment on multiple pages, this method causes a large number of processing tasks to be copied and pasted repeatedly. Obviously, we need to extract common methods.
3. AJAX returns the page fragment and calls the function registration event in the page fragment.
Copy codeThe Code is as follows: <script type = "text/javascript">
$ (Function (){
$ ("# ClickToInsert"). click (function (){
$ ("# Placeholder" cmd.html ($ ("# clone"). val ());
Init_complex_page_segment ();
});
});
</Script>
<Input type = "button" id = "clickToInsert" value = "Insert HTML"/>
<Div id = "placeholder">
</Div>
<Textarea id = "clone" style = "display: none;">
<Script type = "text/javascript">
Function init_complex_page_segment (){
Var parent = $ ("# complex_page_segment ");
$ (". Previous", parent). click (function (){
$ (". Content", parent).html ("Previous Page Content ");
});
$ (". Next", parent). click (function (){
$ (". Content", parent).html ("Next Page Content ");
});
}
</Script>
<Div id = "complex_page_segment">
<Input type = "button" value = "Previous Page" class = "previous"/>
<Input type = "button" value = "Next Page" class = "next"/>
<Div class = "content"> Page Content </div>
</Div>
</Textarea>
In fact, we can go further. There is no need to manually call this function, but we can automatically execute it in the returned HTML snippet.
4. AJAX returns a page segment and its event is automatically registered
Copy codeThe Code is as follows: <script type = "text/javascript">
$ (Function (){
$ ("# ClickToInsert"). click (function (){
$ ("# Placeholder" cmd.html ($ ("# clone"). val ());
});
});
</Script>
<Input type = "button" id = "clickToInsert" value = "Insert HTML"/>
<Div id = "placeholder">
</Div>
<Textarea id = "clone" style = "display: none;">
<Script type = "text/javascript">
$ (Function (){
Var parent = $ ("# complex_page_segment ");
$ (". Previous", parent). click (function (){
$ (". Content", parent).html ("Previous Page Content ");
});
$ (". Next", parent). click (function (){
$ (". Content", parent).html ("Next Page Content ");
});
});
</Script>
<Div id = "complex_page_segment">
<Input type = "button" value = "Previous Page" class = "previous"/>
<Input type = "button" value = "Next Page" class = "next"/>
<Div class = "content"> Page Content </div>
</Div>
</Textarea>
The last method and the first IFrame method are recommended.
Download source code
