Home > Developer > JavaScript
Because loading content is slow, users may accidentally click twice on li, so they will request twice. This is what we don't want to see.
Today, I sent two demos to the javascript-jquery group by copying the clicked li node.
Obviously, the function is not suitable for me.
I am not doing anything. I thought about it. Why not add the loading image (before ajax loading) When I click li to determine whether the img element exists on the li node,
If not, load the ajax content; otherwise, do not process it.
Passed the test, \ (^ o ^ )/.
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> jquery ajax binding event loading </title>
<Style>
* {Margin: 0px; padding: 0px ;}
Body {font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif ;}
# Container {position: relative; overflow: hidden ;}
# Header {height: 100px; line-height: 100px; background: # dedede; padding-left: 20px; position: absolute; left: 0px; top: 0px; position: fixed! Important; width: 100%; margin-bottom: 20px ;}
# Header h1 {font-size: 120%; color: # fff ;}
# Header h1 span {font-size: 75%}
# Siderbar {width: 240px; margin-left: 10px; border: 1px solid # ddd; position: absolute; left: 0px; top: 120px; position: fixed! Important; z-index: 9999 ;}
# Siderbar_box {padding: 10px; overflow: auto}
# Siderbar h4 {background: # eee; color: #666; padding: 5px 10px ;}
# Siderbar_box ul {list-style: none; margin-left: 10px ;}
# Content {padding: 120px 0px 0px 260px; overflow: auto; _ padding: 120px 0px 0px 280px ;}
# Content ul {list-style: none ;}
# Content ul li {border: 1px solid # ddd; cursor: pointer; display: block}
# Content ul li span {display: block; padding: 5px ;}
# Content ul li table {margin: 5px auto; padding: 0px; border-collapse: collapse; border: 1px solid #999; width: 98% ;}
# Content ul li table td {/* padding: 2px 5px; */border: 1px solid #999 ;}
# Content_footer {text-align: center ;}
. Focus {padding: 2px 5px; boder: 1px solid # aaa; background: # fafafa ;}
. Highlight {color: # fff; background: # 0099FF}
</Style>
<Script src = "jquery-1.3.2.min.js"> </script>
<Script>
$ (Function (){
SetHeight ("# siderbar", 130); // you can specify the height of the sidebar.
$ (Window). resize (function () {setHeight ("# siderbar", 130)}); // reset the sidebar height when the window changes
$. Get ("sider.html", function (data ){
$ ('# Siderbar_box'). append (data );
});
/* Set the ID height */
Function setHeight (id, h ){
Var success wheight = $ (window). height ();
((Id).css ({"height" :( windowindowheight-h) + "px "});
}
// View the loaded li after binding
$ ("# Siderbar_box ul li a"). live ("click", function (){
Var $ current = $ (this );
Var $ currentli = $ (this). parent ();
If ($ currentli. children ("ul"). attr ("id") = undefined) // ajax loading is required for the first time
{
$ Currentli. siblings (). children ("ul"). slideUp ('fast ');
$ Currentli. siblings (). children ("a"). removeClass ("focus ");
$. Get ("chapter.html", function (data ){
$ Current. addClass ("focus"). parent (). append (data );
ShowChapter (); // display the main content in the content
});
} Else {
$ Currentli. siblings (). children ("ul"). slideUp ('fast ');
$ Currentli. siblings (). children ("a"). removeClass ("focus ");
If ($ currentli. children ("ul"). is (": visible") // in the expanded State
{
$ Current. removeClass ("focus"). parent (). children ("ul"). slideUp ('save ');
} Else {
$ Current. addClass ("focus"). parent (). children ("ul"). slideDown ('low ');
ShowChapter ();
}
}
});
// Content displays the list title
Function showChapter (){
$. Get ("chapter.html", function (data ){
$ ("# Content" pai.html (data );
$ ("# Content ul li"). live ("click", function () {// bind the loaded title to click the event
$ Current = $ (this );
If ($ current. children ("table"). attr ("id") = undefined) // click the title for the first ajax Load
{
If ($ current. children ("span"). find ("img"). size () <1) // load content only once to prevent multiple requests from loading
{
$ Current. children ("span"). append ("$. Get ("table.html", function (data ){
$ Current. append (data). children ("span"). addClass ("highlight"). find ("img"). remove (); // after loading, remove the loaded image.
});
}
} Else {
If ($ current. children ("table"). is (": visible "))
{
$ Current. children ("span"). removeClass ("highlight"). next ("table"). hide ();
} Else {
$ Current. children ("span"). addClass ("highlight"). next ("table"). show ();
}
}
});
});
}
});
</Script>
</Head>
<Body>
<Div id = "container">
<Div id = "header"> <Div id = "siderbar">
<H4> course <Div id = "siderbar_box">
</Div>
</Div>
<Div id = "content">
<Div id = "content_footer"> </div>
</Div>
</Div>
</Body>
</Html>
Demo address http://demo.jb51.net/js/jquery_li_click/demo.html
Package download http://xiazai.jb51.net/201012/yuanma/jquery_li_click.rar
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
