Привязка моего автозаполнения к моим функциям ввода ввода

Question

Я пытался связать две функции безуспешно: я хочу, чтобы автозаполнение запускалось в полях ввода, которые добавляются, когда пользователь нажимает «добавить».Я могу заставить их работать по отдельности и понял, что я должен связать две функции ... но как нуб, я почти уверен, что делаю это неправильно.Любая помощь приветствуется !!

вот код автозаполнения:

 var J = jQuery.noConflict();
 J(document).ready(function(){
 J('#professor').autocomplete({source:'autocomplete.php', minLength:1});
 });

Вот добавьте код ввода:

    var J = jQuery.noConflict();
J(document).ready(function(){
J("#addproffield").click(function(){
var input = J("<div class='added-field'><input type='text' name='professor[]' id='professor' size='25' value='' />&nbsp;&nbsp;<a href='' class='remove-btn'>Remove field</a></div>");
J("#addprof").append(input);
});
J(".remove-btn").live('click',function() {
J(this).parent().remove();
});
});

вот моя неудачная попытка связатьдва:

   var J = jQuery.noConflict();
J(document).ready(function(){
J("#addproffield").click(function(){
var input = J("<div class='added-field'><input type='text' name='professor[]' id='professor' size='25' value='' />&nbsp;&nbsp;<a href='' class='remove-btn'>Remove field</a></div>");
J("#addprof").append(input);
input.professor({
     source:'autocomplete.php', minLength:1
    });
});
J(".remove-btn").live('click',function() {
J(this).parent().remove();
});
    });

Спасибо !!

Answer 1

Вы связываете автокомплет (.professor?) С <div> вместо <input> в вашей попытке, так что просто нужно немного подкорректировать, чтобы фактически быть элементом <input> через .find(), вот так:

J(document).ready(function(){
    J("#addproffield").click(function(){
    var div = J("<div class='added-field'><input type='text' name='professor[]' size='25' value='' />&nbsp;&nbsp;<a href='' class='remove-btn'>Remove field</a></div>");
    J("#addprof").append(div);

    div.find("input").autocomplete({
        source:'autocomplete.php', minLength:1
    });
});

Обратите внимание, что html-изменения выше, id не должен быть там сейчас и не должен быть, поскольку недопустимо использовать один и тот же идентификатор несколько раз.

Answer 2

Вы близки, вместо input.professor, попробуйте input.find("#professor").autocomplete в вашем коде выше.

Метод find в основном ищет селектор (в данном случае id) внутри элемента.

Answer 3

Функция live в jQuery отлично подходит для динамического применения определенных обработчиков событий к выбранным элементам при изменении DOM, но, насколько мне известно, нет метода для выполнения / вызова функций для выбранных элементов, которые настроить обработчики событий (например, функцию autocomplete в этом вопросе) ...

Итак, вам нужно сделать что-то вроде этого:

var J = jQuery.noConflict();

J(document).ready(function(){
    J("#addproffield").click(function(){
        var input = J("<div class='added-field'><input type='text' name='professor[]' size='25' value='' />&nbsp;&nbsp;<a href='' class='remove-btn'>Remove field</a></div>");
        J("#addprof").append(input);

        //Next line is inefficient and requires the extra class attribute
        //J(".professor").unbind().autocomplete({source:'autocomplete.php', minLength:1});

        //This is better:
        input.find("input").autocomplete({source:'autocomplete.php', minLength:1});
    });

    J(".remove-btn").live('click',function() {
        J(this).parent().remove();
    });
});

Я добавил класс professor к каждому из элементов input, потому что у вас не может быть действительного HTML с дублированными идентификаторами (а jQuery не обрабатывает дублированные идентификаторы).

Я также изменилстрока input.professor..., так что события (onclick, mouseover и т. д.) удаляются из всех input s с помощью class="professor", а затем функция автозаполнения применяется (снова) ко всем выбранным элементам.

Youможет быть в состоянии сделать следующее, но я не пробовал:

var input = J("<div class='added-field'><input type='text' name='professor[]' id='professor' class='professor' size='25' value='' />&nbsp;&nbsp;<a href='' class='remove-btn'>Remove field</a></div>").autocomplete({source:'autocomplete.php', minLength:1});
J("#addprof").append(input);

РЕДАКТИРОВАТЬ: принял совет / ответ Ника и обновленный код выше и удалил id и classатрибутов