Question

我正在尝试使用.load更改onclick事件上特定div的内容，因为某些原因它无法正常工作，我不知道为什么。我试图复制与此帖https://stackoverflow.com/questions/3432553/how-to-load-replace-an-entire-div-from-an-external-html-file

中提到的完全相同的内容

<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>

Answer 1

你必须.ready函数来运行点击事件....因为当文件准备就绪时，你只能处理点击事件

 $(document).ready(function(){
 $("#electric").click(function(e){
 $("#chart_div").load("new_content.html");
 });
 });

Answer 2

for 1.6

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

使用1.9版本的on（）..

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

Answer 3

试试这个：

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

您无需定位#chart_div，因为它不在new_content.html。

Answer 4

无需做更多，只需

$(document).ready(function(){
    $("#electric").click(function(e){
        e.preventDefault();
        $("#chart_div").load("new_content.html");
    });
});

Answer 5

一些变化，

您在脚本标记中缺少http：

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

在“开启”事件

上触发您的脚本

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

Answer 6

代码中缺少

$(function (){。将您的代码包含在您未执行的document.ready内。

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

.load不能改变div的内容

6 个答案: