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

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 回答
0

$(function (){代码中缺少。将您的代码包装在document.ready您没有做的内部。

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