Связывание с .on Событие JQuery

Question

Я использовал плагин автозаполнения для своего сайта. Это работало хорошо для меня. Но теперь, когда я использовал Ajax в то же время Так что, добавляя новый HTML-код с помощью AJax, мой скрипт не удался. я отправил на StackOverflow и получил ответ, как использовать .on из Jquery 1.7.2 Так что я попытался переплетены мой код .on

Мой код

$(document).ready(function(){ 
    $(function(){ 
     $(document).on("click.autocomplete","#artist_id",function(e){ 
      $(this).autocomplete({ 
       source : '<?php echo HTTP_PATH . '/artists/getArtistList'; ?>', 
       multiple: true, 
       mustMatch: true, 
       matchContains: true, 
       scroll: true, 
       minChars: 0, 
       autoFill: true, 
       dataType: "json", 
       parse: function(data) { 
        return $.map(data, function(item) { 
         return { data: item, value: item.label, result: item.label}; 
        }); 
       }, 
       formatItem: function(item) { 
        return item.label; 
       }, 
       formatResult: function(item) { 
        return item.id; 
       }, 
       formatMatch: function(item) { 
        return item.label; 
       } 
      }); 
     }); 
    }); 
}); 

Код, который работает хорошо ...

$("#artist_id").focus().autocomplete('<?php //echo HTTP_PATH . '/artists/getArtistList'; ?>', { 
     multiple: true, 
     mustMatch: true, 
     matchContains: true, 
     scroll: true, 
     minChars: 0, 
     autoFill: true, 
     dataType: "json", 
     parse: function(data) { 
      return $.map(data, function(item) { 
       return { data: item, value: item.label, result: item.label}; 
      }); 
     }, 
     formatItem: function(item) { 
      return item.label; 
     }, 
     formatResult: function(item) { 
      return item.id; 
     }, 
     formatMatch: function(item) { 
      return item.label; 
     } 
    }); 

Проблема не является отправкой ответа или не дает мне ошибки со сценарием. Я попытался проверить это с помощью Firebug.

Answer 1

Ваша проблема эта линия:

$(document).on("click.autocomplete","#artist_id",function(e){ 

Вы ранее «связывания» в центре внимания, теперь вы связываете на «click.autocomplete». Измените его следующим образом:

$(document).on("focus","#artist_id",function(e){ 

согласно jQuery docs on .on(), второй параметр является событие, которое вы хотите связать с, а не селектор.

Answer 2

Немногих вещи:

Это избыточное

$(document).ready(function(){ 
    $(function(){... 

использовать только один или другие.

$(document).ready(function(){... 

Во-вторых, click.autocomplete связывается с клике событий, которые имеют autocomplete пространство имен. То, что я думаю, что вы хотели сделать, - связать событие с любым текстовым вводом, который имеет класс autocomplete.

$(document).on("click",".autocomplete",function(e){ 
    // prevent the default action 
    e.preventDefault(); 
    // initialize autocomplete 
    $(this).autocomplete({ 
     ... 
    }) 
    // remove class to prevent reinitializing autocomplete: 
    .removeClass('autocomplete') 
    // trigger the focus event to start the autocomplete 
    .focus(); 
}); 

$(document).ready здесь не требуется, так как document уже готов.