Событие выбора в функции автозаполнения, вызванное в функции append, не работает

Question

В моем коде у меня есть такой скрипт:

<script type="text/javascript">
  var counter = 0;
  $(function () {
    $("#tags").autocomplete({
      source: "/Home/TakeSurowce",
      minLength: 0,
      select: function (event, ui) {
        if (ui.item) {
          $('input[name="Surowiec[' +counter+ '].SurowiecID"]').attr('value', ui.item.id);
        }
      }
    });
  });
</script>

Он работает очень хорошо, но я не знаю, как использовать точно такую ​​же функцию в другой функции:

 <script type="text/javascript">
  var num = 1;
  function addRow() {
    $("#cialoTabeli")
    .append($('<tr></tr>')
    .append($('<td style="width: 100px" id="tdWithAutocomplete"></td>')
            .append($('<input type="hidden" name="Surowiec[' + num + '].SurowiecID" value=""/>'))
            .append($('<input id="tags" name="Surowiec[' + num + '].Nazwa" />').autocomplete({
                source: "/Home/TakeSurowce",    
                minLength: 0,
                select: function (event, ui) {         // this don't work !!!
                    if (ui.item) {
                        $('input[name="Surowiec[' + num + '].SurowiecID"]').attr('value', ui.item.id);
                    }
                }
            })
            ) // end of input with AUTOCOMPLETE
    ) // end of td with AUTOCOMPLETE

    .append($('<td style="width: 100px"></td>')
        .append($('<input id="SurowiecIlosc" name="SurowiecIlosc[' + num + ']" type="text" value="" />'))
    )
    .append($('<td></td>')
        .append($('<input type="button" value="+" onclick="addRow()" />'))
    )
);  // END OF TR
    num++;

};  // WHOLE FUNCTION ENDS
</script>

Выбор события в функции .autocomplete не работает (внутри функции addRow ()).Это событие берет идентификатор выбранного элемента из автозаполнения и помещает значение идентификатора в атрибут значения в типе ввода скрытый.Кто-нибудь знает, почему это не работает и как это должно выглядеть, чтобы работать должным образом?Это странно, потому что все, кроме этого события выбора, работает.Спасибо за любую помощь.

Answer 1

Это работает:

<script type="text/javascript">
var num = 1;
function addRow() {
    $("#cialoTabeli")
    .append($('<tr></tr>')
        .append($('<td style="width: 100px" id="tdWithAutocomplete"></td>')

                .append($('<input id="tags" name="Surowiec[' + num + '].Nazwa" />').autocomplete({
                    source: "/Home/TakeSurowce",
                    minLength: 0,
                    select: function (event, ui) {
                        if (ui.item) {
                            $('input[name="Surowiec[' + num + '].SurowiecID"]').attr('value', ui.item.id);
                            var hidden = $(this).parent().find('input[type="hidden"]')[0];
                            $(hidden).val(ui.item.id);
                        }
                    }
                }) // KONIEC INPUTA Z FUNKCJA jQUERY AUTOCOMPLETE

                ).append($('<input type="hidden" name="Surowiec[' + num + '].SurowiecID" value="" />'))
        ) // KONIEC TD Z jQUERY AUTOCOMPLETE

        .append($('<td style="width: 100px"></td>')
            .append($('<input id="SurowiecIlosc" name="SurowiecIlosc[' + num + ']" type="text" value="" />'))
        )
        .append($('<td></td>')
            .append($('<input type="button" value="+" onclick="addRow()" />'))
        )
    );      // KONIEC TR
        num++;

};  // KONIEC CALEJ FUNKCJI
</script>

Answer 2

вам нужно экранировать [ и ]

 $('input[name="Surowiec\\[' +counter+ '\\].SurowiecID"]').attr('value', ui.item.id);

Я пытался воссоздать ваш сценарий, вот что я сделал в контроллере

    public JsonResult SO()
    {
        var infrastruktury = new MyClass2().FindAllInfrastruktury();

        return Json(infrastruktury, JsonRequestBehavior.AllowGet); 

    }
    public class MyClass
    {
        public int id { get; set; }
        public string value { get; set; }          

    }

    public class MyClass2
    {
        public IList<MyClass> FindAllInfrastruktury()
        {
            return Enumerable.Range(1, 5).Select(x => new MyClass
            {
                id = x,
                value = "value" + x
            }).ToList();               
        }

    }

ина мой взгляд

  $("#tags").autocomplete({
          source: "/Home/SO",
          minLength: 0,
          select: function (event, ui) {
              console.log(ui.item.id);   <-- i got the selected id here         
          }
      });

пожалуйста, убедитесь, что вы получаете правильные данные с сервера