为动态创建的 table 行分配 Jquery tokeninput

Question

已编辑

Table 模板

<table id="Newdiagnosis" style="display:none">
<tr>
 <td><input class="diag" style="width:200px" type="text" name="provider_diagnosis_dtls[#].diagnosis_code" value /></td>
<td><input style="width:500px" type="text" name="provider_diagnosis_dtls[#].diagnosis_desc" value /></td>
<td>
<input type="text" name="provider_diagnosis_dtls[#].diagnosis_level)" readonly value />
<input type="hidden" name="diagnosis.Index" value="%" />
</td>
</tr>
 </table>

Jquery 用于动态添加行

    $(document).ready(function () {
     $("#N").click(function () {
     var index = (new Date()).getTime();
     var clone = $('#Newdiagnosis').clone();
     clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));
    clone.html($(clone).html().replace(/"%"/g, '"' + index + '"'));
     $("#diagnosis").append(clone.html());
     });
 });

我需要为每个动态创建的文本框附加 Jquery tokeniput。可能吗？

我在Jquery

中尝试了下面的代码

$("#N").click(function () {
    var index = (new Date()).getTime();
    var clone = $('#Newdiagnosis').clone();
    clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));
    clone.html($(clone).html().replace(/"%"/g, '"' + index + '"'));
    clone.find(".diag").tokenInput("@Url.Action("SearchDiagnosis", "Preapproval")", {
         theme: 'facebook',
         preventDuplicates: true,
         searchingText: 'Searching...',
         tokenLimit: 1
    });
    $("#diagnosis").append(clone.html());
});

这不是从 url 中给出的操作中搜索数据，但同样适用于非动态文本框

Answer 1

将元素添加到 DOM

后，您需要将插件附加到元素

var diagnosis = $("#diagnosis"); // cache it
$("#N").click(function () {
  var index = (new Date()).getTime();
  var clone = $('#Newdiagnosis').clone();
  clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));
  clone.html($(clone).html().replace(/"%"/g, '"' + index + '"'));
  diagnosis .append(clone.html());
  // Attach the plugin to the new element
  diagnosis.find('.diag').last().tokenInput('@Url.Action("SearchDiagnosis", "Preapproval")', {
    theme: 'facebook',
    preventDuplicates: true,
    searchingText: 'Searching...',
    tokenLimit: 1
  });
});

旁注：根据您的评论，您指出某些元素具有 onchange=".."。您应该从标记中删除删除行为并使用事件委托来处理动态添加的元素

$("#diagnosis").on('change', '.diag', function() {
  // do something
});

为动态创建的 table 行分配 Jquery tokeninput

Assign Jquery tokeninput for a dynamically created table row

jquery

asp.net-mvc

jquery-tokeninput