无法使 jsFiddle 示例工作答案

【问题标题】：Cannot make jsFiddle example work无法使 jsFiddle 示例工作
【发布时间】：2013-01-26 13:41:50
【问题描述】：

我希望在我的网站上找到与此处相同的功能：http://jsfiddle.net/jhruh/2/。

我不明白为什么如果我复制所有东西，我就无法获得相同的功能。我所做的步骤是：

复制了 HTML
在我在步骤 1 中复制的 html 的头部添加了 jquery 库（<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
添加了一个 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/，但我无法让它继续工作。

【问题讨论】：

请添加不同行为的详细信息
对不起，我没有解释，因为行为很明显。没有图像显示。注意 jsFiddler 如何显示丰田图像。在我的网站上只显示标题
检查 Chrome 或 Firefox 的网络标签 - 查看图像请求的响应代码。
好问题我不介意我得到什么图像，所以我将更改图像的来源以获得新图像。即将尝试，感谢您的帮助！
我可以看到来自不同域的图像，图像的来源是：1call.ms/Websites/schwartz2012/images/toyota-rav4.jpg

标签： jquery html jquery-mobile jsfiddle

【解决方案1】：

第 33 行，第 74 列：元素 img 上属性 src 的值错误：必须非空。 IRI 引用的语法：任何网址。例如：/hello、#canvas 或 http://example.org/。字符应在 NFC 中表示，空格应转义为 %20。

【讨论】：

保罗感谢您的帮助。我根据您的回答更新了我的回答。
谢谢，它成功了吗？有什么问题！？我很好奇它看起来像相同的代码
我不确定为什么当脚本位于 HEAD 部分时它会运行，但您可能想研究一下 - 我希望它可能与在 jquery 中使用 .live 函数有关
拥有两个身体标签对我来说毫无意义。好消息是它有效，我会保持这种状态，谢谢！
请不要这样，这是一个黑客。这是你的问题 "$("#cars").live('pagebeforeshow', function () {"