1

.load を使用して onclick イベントで特定の div のコンテンツを変更しようとしていますが、何らかの理由で機能していません。その理由はわかりません。この投稿で尋ねられたのとまったく同じことを複製しようとしています https://stackoverflow.com/questions/3432553/how-to-load-replace-an-entire-div-from-an-external-html-ファイル 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript">


$(document).ready(function() {

$('#electric').bind('click',function(){
    $("#chart_div").load("new_content.html");
 });
});

</script>

html

<div id="container">
      <div id="chart_div">hello</div>
</div>
    <ul class="nav nav-pills">
    <li class="active">
    <a id="electric" href="#">Electric link</a>
    <li class="active">
    <a href="#">Gas</a>
</ul>

new_content.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Graph</title>
</head>
<body>
    <p>New Content!</p>
</body>

4

6 に答える 6

1

クリックイベントを実行するには.ready関数が必要です....ドキュメントの準備ができたら、クリックイベントを処理できるのはあなただけだからです

 $(document).ready(function(){
 $("#electric").click(function(e){
 $("#chart_div").load("new_content.html");
 });
 });
于 2013-03-06T11:02:25.957 に答える
0

$(function (){がコードにありません。document.ready実行しなかった内部にコードをラップします。

$(function()
{
    $("#electric").on('click',function()
    {
        $("#chart_div").load("new_content.html #chart_div");
    });
});
于 2013-03-06T05:23:26.520 に答える
0

1.6の場合

$('#electric').live('click',function(){
//your code
});

1.9 バージョンから on() を使用します。

$(document).on('click','#electric',function(){
//your code..
});
于 2013-03-06T05:14:14.977 に答える
0

これを試してください：

<script type="text/javascript">
  $(function(){
    $("#electric").click(function(e){
       e.preventDefault();
       $("#chart_div").load("new_content.html");
    });
  });
</script>

#chart_divに含まれていないため、ターゲットにする必要はありませんnew_content.html。

于 2013-03-06T05:18:01.467 に答える
0

これ以上する必要はありません。

$(document).ready(function(){
    $("#electric").click(function(e){
        e.preventDefault();
        $("#chart_div").load("new_content.html");
    });
});
于 2013-03-06T05:18:03.513 に答える
0

一部の変更、

スクリプトタグに http: がありません。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

「ON」イベントでスクリプトをトリガーします

$(function (){
    $("#electric").on('click',function(){
      $("#chart_div").load("new_content.html #chart_div");
    });
});
于 2013-03-06T05:19:07.320 に答える