在函数追加中诱导的自动完成函数中选择事件不起作用

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()函数中)。此事件从自动完成中获取所选项目的id，并将id值放到隐藏输入类型中的值属性中。有谁知道为什么这个不工作，它应该看起来正常工作吗?这很奇怪，因为除了这个select事件之外，所有的东西都可以工作。谢谢你的帮助。

Answer 1

您需要转义[和]

 $('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         
          }
      });

请验证您正在从服务器获取正确的数据

Answer 2

这行得通:

<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>