Jquery 向数据表添加令牌字段

我有一个DataTable，我想在其中一列中使用Tokenfield autocomplete库。我的问题是，当由于分页而重新绘制DataTable时，Tokenfield不起作用

DataTable已初始化/令牌字段已初始化

App.datatables();

        /* Initialize Datatables */
        $('#memberTable').dataTable({
            columnDefs: [{ searchable: false, targets: 3 }],
            processing: true,
            pageLength: 20,
            lengthMenu: [[10, 20, 50, -1], [10, 20, 50, 'All']]
        });

        /* Add placeholder attribute to the search input */
        $('.dataTables_filter input').attr('placeholder', 'Search');


/* create tokenfield */
$('.addCategory').tokenfield({
      autocomplete: {
        source: (baseURL+"/directory/autocomplete"),
        delay: 100,
        min:2
      },
      showAutocompleteOnFocus: true
    })

$('.addCategory').on('tokenfield:createdtoken', function(e) {
                var id = $(this).attr('id');
            $.post(baseURL+'/directory/add_skill', {
                tag : e.attrs.value,
                tagId : e.attrs.id,
                contractorId : id
            }, function(response) {
                if (response.success == 200) {
                     /* ... */
                } else if (response.error == 400) {
                    /* ... */
                }
            }, 'json');
            return false;
        });

我知道在使用draw.dt事件分页并在函数内部创建Tokenfield之后，我可以让Tokenfield工作：

$('#memberTable').on( 'draw.dt', function () {

   $('.addCategory').tokenfield({  ...continue as written above.

   $('.addCategory').on('tokenfield:createdtoken', function(e) { ...continue as written above. 
});

不幸的是，这会执行两次ajax调用，这是有意义的，因为tokenfield ajax调用在我的代码中列出了两次。我的问题是：在重新绘制表时，如何在分页后使Tokenfield工作，而不发生两次ajax调用？

CAUSE 如果

draw.dt

事件处理程序在表初始化之后被附加，则在发生初始绘制时不会调用它，仅针对后续事件

解决方案 您可以在表初始化之前附加事件处理程序，请参见下文。您只需要在事件处理程序中初始化一次令牌字段

$（'#memberTable'）.on（'draw.dt'，function（）{
$（'.addCategory'）.tokenfield（{/*跳过*/}）；。
$（'.addCategory'）。on（'tokenfield:createdtoken'，函数（e）{/*跳过*/}）；
});
$（'#memberTable'）.dataTable（{/*跳过*/}）；

另一种解决方案是使用选项来处理绘图事件

$（'#memberTable'）。数据表（{
drawCallback:function（）{
$（'.addCategory'）.tokenfield（{/*跳过*/}）；。
$（'.addCategory'）。on（'tokenfield:createdtoken'，函数（e）{/*跳过*/}）；
},
/*跳过*/
});

链接

---

有关更多示例和详细信息，请参见。

谢谢。我喜欢答案如此简单的时候，不知道会很痛。