2017-02-11 13 views
0

のために私はAjaxを使用して私の新しい仕事を設計することを決めたと私は、これは正しく動作負荷のページ香港ブラウザは、Ajax

HTMLのため

<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<link rel="stylesheet" type="text/css" href="style.css"/> 
<script src="jquery.js"></script> 
<script src="script.js"></script> 
</head> 

<body> 
<div class="menu"> 
    <ul> 
    <li class="page2" id="page2">PAGE TOW</li> 
    <li class="page3" id="page3">PAGE THREE</li> 
    </ul> 
</div> 
<div class="load"></div> 
</body> 
</html> 

JS

$(document).on('click','.menu li',function(){ 
    var $this = $(this); 
    if($(this).hasClass("page2")) { 
     $(".load").load('page2.php'); 
    } 
    else if($(this).hasClass("page3")) { 
     $(".load").load('page3.php'); 
    } 
}); 

をこのタラを使用します!しかし、タブをクリックすると何度もブラウザがハングアップします... 私の質問は、コードがひどく書かれているかどうかです。 これはAjaxで普通です Ajaxを助ける方法がある場合、または使用しない場合

答えて

0

コードは良く書かれていませんが、これを解決する方法は効率的ではありません。クリックイベントを$(document)にアタッチすることで、多くの不必要なオーバーヘッドが発生し、ブラウザが他の場所で使用する可能性のある多くのリソースを使用しています。

代わりに、最も近い親要素にイベントハンドラを追加するようにしてください。そうですね...
$('.menu li').on('click', function(e) { //Run your code in here });
これがより良い方法である理由の詳細は、this stackoverflow questionの回答をご覧ください。

This answer hereには、対象に関する多くの優れた情報もあります。

関連する問題