Как я могу решить ошибку "нет метода"appendTo"?

#javascript #jquery

Вопрос:

Как я могу решить эту ошибку:

Ошибка неперехваченного типа: объект не имеет метода ‘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

1. В том, что вы сюда включили, нет ничего явно неправильного. Когда вызывается функция refresh()? Надеюсь, после того, как документ будет готов или загружен. Что находится внутри .js? Может быть, вы могли бы подкинуть скрипку, чтобы посмотреть?

Ответ №1:

Я предполагаю, что вы используете шаблоны 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" );
});

Ответ №2:

Сначала вам нужно создать узел. Попробуйте это:

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