Question

当我在控制台日志中打印出来时，我可以看到该值，但是我没有看到list.html中的html页面中填充的值。所以我猜我需要确保元素之前已经加载了吗？任何建议都将不胜感激。

HTML：

<script type="text/html" id="searchPickPlaceTemplate">
<div class="searchPickWhere_box">
    <ul data-inset="true">                             
        <li><a data-transition="slide" id="searchPickWhere" href="list.html">{{whereSearch}}</a></li>                             
     </ul>
 </div>

脚本：

 $('#restWhere').bind('touchstart mousedown', function (e) {                
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: WebServiceURL + "GetSuburbsWithPlacesAndCity",
                dataType: "json",
                data: "{'cityId':'" + cityId + "', 'categoryId': '" + categoryId + "'}",
                success: function (result) {
                    $("#searchPickPlace").html("");
                    $.each(result.d, function () {
                        $(document).ready(function () {
                            console.log('SubrubName asdfsd ' + this.name);
                            var test = $("#searchPickPlaceTemplate").text();
                            test = test.replace("{{whereSearch}}", this.name);
                            $("#searchPickPlace").append(searchPickRestaurnt);
                        });
                    });
                }
            });
        });

Answer 1

首先：

从每个块中移除$（document）.ready（function（）{，它不能用于它而你不需要它。
替换此行：$（“＃searchPickPlace”）。append（searchPickRestaurnt）;用这个$（“。searchPickPlace”）。append（test）;你把错误的东西附加到了错误的元素上。

以下是您的代码的一个愚蠢的例子：http://jsfiddle.net/Gajotres/tJBGw/

所以看起来应该是这样的：

$('#restWhere').bind('touchstart mousedown', function (e) {                
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: WebServiceURL + "GetSuburbsWithPlacesAndCity",
            dataType: "json",
            data: "{'cityId':'" + cityId + "', 'categoryId': '" + categoryId + "'}",
            success: function (result) {
                $("#searchPickPlace").html("");
                $.each(result.d, function () {
                    console.log('SubrubName asdfsd ' + this.name);
                    var test = $("#searchPickPlaceTemplate").text();
                    test = test.replace("{{whereSearch}}", this.name);
                    $(".searchPickPlace").append(test);
                });
            }
        });
    });

Answer 2

始终尝试将您的JavaScript代码放在html body标记之前。例如：

<body>
    your html code
    <script>
         // your js code
    </script>
</body>

或使用jQuery文档就绪函数。你必须只使用一次，而不是每次迭代。

谢谢

jQuery Mobile - 动态替换html中的脚本标记

2 个答案: