我希望在这里找到相同的功能：http: //jsfiddle.net/jhruh/2/在我的网站上。
我不明白为什么如果我复制所有东西，我就得不到相同的功能。我所做的步骤是：
- 复制了 HTML
- 添加了 jquery 库（
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>在我在步骤 1 中复制的 html 的头部 - 添加了一个 script 标签作为包含 jsFiddler 代码的 body 标签的最后一个子标签。
- 在 JavaScript 代码之上添加了 jquery $(function(){})。
换句话说，我现在有：
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width" />
<!-- Step 2 -->
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header">
<h1>
XML Parsing demo</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="cars-data">
</ul>
</div>
</div>
<div data-role="page" id="cars">
<div data-role="header">
<a data-role="button" data-transition="none" data-theme="a" href="#index">Back</a>
<h1>
</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="car-data">
</ul>
<img src="" width="100%" style="height: auto;" id="car-img" />
</div>
</div>
<!-- Step 3 -->
<script>
// <!-- Step 4 // do stuff after DOM has loaded -->
$(function () {
$('#index').live('pagebeforeshow', function (e, data) {
$('#cars-data').empty();
$.ajax({
type: "POST",
url: "InvalidUrlCreatedOnPurpose",
dataType: "xml",
data: {
xml: "<cars><car><name>TOYOTA</name><country>JAPAN</country><pic>http://1call.ms/Websites/schwartz2012/images/toyota-rav4.jpg</pic><description>Toyota has announced that it will recall a total of 778,000 units that may have been manufactured with improperly-tightened nuts on the rear suspension.</description></car></cars>"
},
success: function (xml) {
var xmlstr = (new XMLSerializer()).serializeToString(xml);
alert(xmlstr);
alert(xml);
ajax.parseXML(xml);
},
error: function (request, error) {
alert('Remember to remove this message once it works!');
var x = "<cars><car><name>TOYOTA</name><country>JAPAN</country><pic>http://1call.ms/Websites/schwartz2012/images/toyota-rav4.jpg</pic><description>Toyota has announced that it will recall a total of 778,000 units that may have been manufactured with improperly-tightened nuts on the rear suspension.</description></car></cars>";
ajax.parseXML(x);
}
});
});
$("#cars").live('pagebeforeshow', function () {
$("#cars div[data-role='header'] h1").html(carObject.carName);
$('#car-data').empty();
$('#car-data').append('<li>Car Type:<span> ' + carObject.carName + '</span></li>');
$('#car-data').append('<li>Car Country:<span> ' + carObject.carCountry + '</span></li>');
$('#car-data').append('<li>Car Description:<span> ' + carObject.description + '</span></li>');
$('#car-data').listview('refresh');
$('#car-img').attr('src', carObject.img);
});
var ajax = {
parseXML: function (result) {
$(result).find("car").each(function () {
carObject.carName = $(this).find('name').text();
carObject.carCountry = $(this).find('country').text();
carObject.img = $(this).find('pic').text();
carObject.description = $(this).find('description').text();
$('#cars-data').append('<li><a href="#cars"><img src="' + carObject.img + '" title="sample" height="100%" width="100%"/><h3>Car type:<span> ' + carObject.carName + '</span></h3><p>' + carObject.description + '</p></a></li>');
});
$('#cars-data').listview('refresh');
$('#index').append('<div data-role="footer" data-position="fixed"><h1>Dynamicaly added footer</h1></div> ');
$('#index [data-role="content"]').append('<fieldset data-role="controlgroup"><legend>Choose:</legend><input type="radio" name="radio" id="radio1" value="1" checked="checked" /><label for="radio1">option 1</label></fieldset>');
$('#index').trigger('pagecreate');
}
}
var carObject = {
carName: '',
carCountry: '',
img: '',
description: ''
}
});
</script>
</body>
</html>
页面行为不同，为什么？我知道 jsFiddler 可以使用 url 'echo' 模拟 ajax 调用，但我故意模拟了一个错误，希望能在我的网站上得到相同的结果。
编辑
我将图像源更改为：http ://cdn1.iconfinder.com/data/icons/sleekxp/Google%20Chrome.png
我更新了 jsFiddler，新链接是：http: //jsfiddle.net/jhruh/3/ ，但我无法让它继续工作。