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

时间:2015-04-19 07:32:25

标签: jquery asp.net-mvc jquery-tokeninput

被修改

表格模板

<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中给出的操作中的数据,但是同样适用于非动态文本框

1 个答案:

答案 0 :(得分: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
});