我怎样才能解决“无方法'appendTo'错误?

时间:2011-11-03 21:28:02

标签: javascript jquery

如何解决此错误:

未捕获的TypeError:对象没有方法'appendTo' 在以下代码中:

    function refresh(){
        $('#contacts').empty();
        $( "#contactTmpl" ).tmpl( {contacts:contacts} ).appendTo( "#contacts" );
        $( ".contact" ).each( function(i) {
            var contact = contacts[i];
            $( "input.tomap", this ).link( contact );
        });
    }


 <script type="text/javascript" src="a.js"></script>

<form>
    <div id="contacts">Loading ...</div>
    <button class="add">New</button>
    <button class="save"> Save</button>
</form>
<script id="contactTmpl" type="text/x-jquery-tmpl">

    {{each contacts}}
        <div class="contact" data-index="${$index}">
            <label>First name</label> <input class="tomap" name="firstName" value="${firstName}">
            <label>Last name</label> <input class="tomap" name="lastName" value="${lastName}">
            <label>Number</label> <input class="tomap" name="phone" value="${phone}">
            <div class="tools">
                <button class="delete"</button>
            </div>
        </div>
    {{/each}}
</script>

这是html和javascript代码

2 个答案:

答案 0 :(得分:4)

我将假设您正在使用jQuery模板,因为它就是它的样子。如果模板无法渲染,那么它返回null,我相信这就是为什么你得到的对象没有方法错误。我将您的代码修剪为模板和调用以渲染模板并修复了{{each}}${$index}。我还假设变量contacts是一个对象数组。

这里有一个工作小提琴:http://jsfiddle.net/brettwp/yfcuL/

还有代码:

<div id="contacts">EMPTY</div>
<script id="contactTmpl" type="text/x-jquery-tmpl">
    {{each(index,contact) contacts}}       
        <div class="contact" data-index="${index}">
            <label>First name</label> <input class="tomap" name="firstName" value="${contact.firstName}">
            <label>Last name</label> <input class="tomap" name="lastName" value="${contact.lastName}">
            <label>Number</label> <input class="tomap" name="phone" value="${contact.phone}">
            <div class="tools">
                <button class="delete"></button>
            </div>
        </div>
    {{/each}}
</script>

$(function(){
    $( "#contactTmpl" ).tmpl( {contacts: contacts} ).appendTo( "#contacts" );
});

答案 1 :(得分:1)

您需要先创建节点。试试这个:

$('<div id="contactTmpl"/>').tmpl( {contacts:contacts} ).appendTo( "#contacts" );