Question

我有以下情况：

我有一个表格，其中填写了如下结构中的姓名，姓氏，位置和课程等用户数据：

<tr>                          
   <td data-label="First Name" class="wppb-name"><span>Mutanga</span></td>
   <td data-label="Last Name" class="wppb-name"><span>Eto Emule</span></td>         
   <td data-label="Location" class="wppb-name"><span>Somewhere</span></td> 
   <td data-label="Courses" class="wppb-name seminaria-multiselect">Course 1, Course 2, Course 3, Course 4, Course 5, Course 6</td>                    
</tr>

课程是在一长串文本中提取的，没有分离，我不想要我也不能手动插入每个课程的跨度元素。我使用以下jQuery代码段更改它。这会将课程分开并将它们插入到跨度中并且可以正常工作。

$('.seminaria-multiselect').each(function() {                   
    $(this).html($(this).html().split(', ').map(function(el) {
        return '<span>' + el + '</span>';
    }));        
});

现在的问题是，当我应用过滤器（例如，过滤特定位置或特定过程的用户）时，它会使用AJAX进行过滤，并且它会丢失上述代码段的“跨度格式”。

我知道这可以使用on（）方法解决，如下所示：

$(document).on('change', '.seminaria-multiselect', function() { 
    $('.seminaria-multiselect').each(function() {                   
        $(this).html($(this).html().split(', ').map(function(el) {
            return '<span>' + el + '</span>';
        }));        
    });
});

然而，这个片段本身并不能正常工作。加载页面后，文本在应用过滤器后也不会分成跨度。

如果我像这样保留两个片段：

$('.seminaria-multiselect').each(function() {                   
    $(this).html($(this).html().split(', ').map(function(el) {
        return '<span>' + el + '</span>';
    }));        
});         
$(document).on('change', '.seminaria-multiselect', function() { 
    $('.seminaria-multiselect').each(function() {                   
        $(this).html($(this).html().split(', ').map(function(el) {
            return '<span>' + el + '</span>';
        }));        
    });
});

然后它在页面加载上应用跨度分离，但过滤仍然不会产生我想要的结果。

Q1）为了使其有效，我应该纠正什么？ Q2）有更有效的方法吗？是否有必要保留两个片段（页面加载时的第一个片段和过滤时的第二个片段）

非常感谢你的时间:)。

Answer 1

您可以在页面加载时手动触发更改事件，以使其正常工作。

$(document).ready(function(){         
$(document).on('change', '.seminaria-multiselect', function() { 
    $('.seminaria-multiselect').each(function() {                   
        $(this).html($(this).html().split(', ').map(function(el) {
            return '<span>' + el + '</span>';
        }));        
    });
});
$(".seminaria-multiselect").trigger("change");
});

关于改变AJAX问题的jQuery

1 个答案: