Question

我们为我们的项目提供了HTML，他们使用mdb.min.js库将每个<select>框标记转换为<ul><li>格式。

当我们通过div元素中的ajax设置一段html代码时，问题就出现了。在这种情况下，由于未转换为<ul><li>格式，因此没有选择框。

有没有什么办法可以在AJAX成功方法中动态调用这个库的任何函数来转换所有选择框？

代码：

$(document).ready(function() {

$(".editConfiguration").click(function() {
    var cart = $(this).attr("data-cartid");
    $.ajax({

        type : 'GET',
        url : ACC.config.contextPath
                + '/configure/edit',
        data : 'cartId='+cart,
        beforeSend : function(xhr) {
        },
        success : function(response) {
            $("#configurationsettings").html(response);
        },
        error : function(resp) {
        }

    });
})

})

Answer 1

请试一试。

$(document).ready(function() {

$(".editConfiguration").click(function() {
    var cart = $(this).attr("data-cartid");
    $.ajax({

        type : 'GET',
        url : ACC.config.contextPath
                + '/configure/edit',
        data : 'cartId='+cart,
        beforeSend : function(xhr) {
        },
        success : function(response) {
            $("#configurationsettings").html(response);
            $("select").material_select();
        },
        error : function(resp) {
        }

    });
})

})

Answer 2

您可以使用MutationObserver来解决此问题。请阅读我的回答here。

这是针对您案例的考试：

var config = { subtree: true, childList: true };
var callback = function(mutationsList) {
    for(var mutation of mutationsList) {
        $(mutation.addedNodes).find('.mdb-select').material_select();
    }
};

var observer = new MutationObserver(callback);
observer.observe(document.body, config);

var container = document.createElement('div')
container.innerHTML = `
<select class="mdb-select">
    <option value="" disabled selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>
<label>Example label</label>
`;
document.body.appendChild(container);
var span = document.createElement('span')
document.body.appendChild(span);

如何使用mdb.min.js

2 个答案: