Question

我正在使用jquery mobile ...

我有一个按钮（data-role =“button”），它调用一个执行一些ajax的javascript函数。然后，这个ajax会在页面中添加一些HTML。返回的HTML上有一个data-role =“button”，但它没有以正确的jquery移动样式返回。

任何想法如何让ajax以正确的样式返回jquery而不实际静态地放入jquery类？我愿意使用数据角色来保持一致性。

Answer 1

这是有效的，但我想在循环中创建一个按钮。所以我需要很多按钮，它只有一个按钮创建。这是我的javascript代码：

    $(document).ready(function () {
        $.ajax({
            type: "POST",
            datatype: "JSON",
            url: "/Home/SeferleriGetir",
            success: function (returnData) {
                if (returnData.ok) {
                    debugger;
                    for (var i = 0; i < returnData.data.length; i++) {
                        var html = "";
                        html += "<li>";
                        html += "<a href='' data-role='button' data-icon='arrow-r' data-iconpos='right' style='width: 100%'>";
                        html += "<div style='font-size: 14px; display: inline'>";
                        html += "<div style='text-align: left'><div style='width: 50%; display: inline-block; color: #ff0000'><div style='display: inline; width: 50%; text-align: left;'>" + returnData.data[i].firmaAdi + "</div></div>";
                        html += "<div style='width: 50%; display: inline-block'><div style='display: inline'>Fiyat :</div><div style='display: inline; text-align: right; color: #ff0000'>" + returnData.data[i].fiyat + " <span>TL</span></div></div></div>";
                        html += "<div style='text-align: left'><div style='width: 50%; display: inline-block'><div style='display: inline; text-align: left'>H. Saati :</div><div style='display: inline; color: #2192b8'>" + returnData.data[i].kalkisSaati + "</div></div>";
                        html += "<div style='width: 50%; display: inline-block'><div style='display: inline; text-align: right'>Süre :</div><div style='display: inline; color: #2192b8'>" + returnData.data[i].seferSuresi + "</div></div></div>";
                        html += "<div style='text-align: left'><div style='width: 50%; display: inline-block'><div style='display: inline'>O. Tipi:</div><div style='display: inline; color: #2192b8'>" + returnData.data[i].otobusTipi + "</div></div>";
                        html += "<div style='width: 50%; display: inline-block'><div style='display: inline'>S. Tipi:</div><div style='display: inline; color: #2192b8'>" + returnData.data[i].seferTipi + "</div></div></div>";
                        html += "<div style='text-align: left'><div style='display: inline;'>Güzergah :</div><div style='display: inline; color: #2192b8'>" + returnData.data[i].guzergah + "</div></div>";
                        html += "</div>"
                        html += "</a></li>";
                        $("#ulSeferler").append(html).trigger('create');
                    }
                }
            }
        });
    });

}

Answer 2

您必须手动增强html，因为这不是任何委托。最好在添加html后立即：）

 //document or place where are the buttons 
 $(document).trigger("create");

在ajax＆lt; data-role上生成jquery移动样式

2 个答案: