Question

我从ajax调用接收一个数组，并使用数组元素构建一系列无线电盒。它运行良好，直到我尝试刷新它们以应用jqm标记。我只看到预期的4个中的两个，或预期的3个中的一个。我已经创建了一个小提琴来说明问题，但小提琴根本没有应用标记，只显示正确数量的方框。小提琴是：https://jsfiddle.net/wlukasz/9hno6pyh/7/。这是我的HTML：

<table class="std-table">
   <tr>
     <td><div id="areas"></div></td>
  </tr>
</table>

和javascript：

$(document).on('pagebeforeshow', '#property-details-page', function(){   

all_areas = new Array();
var Q001Data = "sql=Q001&dbcall=sql_get_results_array&memid="+<?php echo $member_id?>+"&propid="+<?php echo $property_id?>;
$.ajax({ // ### AJAX to get ALL AREAS on page load ###
    url:"pl_process_ajax_call_property_features.php",
    type:"POST",
    data : Q001Data,
    success:function(msg){
        $("#areas").html('<fieldset id="all-areas-radio" data-role="controlgroup" data-mini="true"></fieldset>');
        all_areas = JSON.parse(msg);
        var textToInsert = '';
        var i;
        for (i = 0; i < all_areas.length; i++) {
            var area = JSON.stringify(all_areas[i][0]);
            alert(area+i);
            textToInsert  += '<input type="radio" class="all-areas" name="property-area" id="' + area + '" value="' + area + '"><label for="' + area + '">' + area + '</label>';    
            alert(textToInsert);
        }
        $("#all-areas-radio").append(textToInsert);    
        $("[type=radio]").checkboxradio();
        $("[data-role=controlgroup]").controlgroup().controlgroup("refresh");
    },
    error: function (jqXHR, textStatus, errorThrown) {
        alert("Error Q001!");
    },
}); // ### AJAX to get ALL AREAS on page load ###
}); // ### document.on

我也使用这个css来更改按钮标签颜色＆＃34;检查＆＃34;：

<style>
#all-areas-radio div .ui-radio .ui-radio-on {
    background: orange !important;
}
</style>

所有预期的广播框都显示在屏幕上，直到我尝试应用jqm标记：

$("[type=radio]").checkboxradio();
$("[data-role=controlgroup]").controlgroup().controlgroup("refresh");

这导致标记正确应用于预期的4个框4，只有两个增强可见。如果我期待3个盒子，我只会收到一个增强型，另外两个不可见。我运行jquery 1.11和jqm 1.45。请帮忙。

Answer 1

我删除了双引号：

area = area.replace(/['"']/g,'');

并且脚本运行正常。但问题仍然存在，如果你需要引号作为字符串的一部分该怎么办？

Answer 2

这不是jQuery Mobile问题。这里的工作流程在概念上是错误的。

您不能引用id和值。你应该建立你的标记以不同的方式。理想情况下，您应在数据中保留分隔的名称和值，例如：

[{"id": "br", "name": "Bathroom"}, {"id": "be", "name": "Bedroom"}, {"id": "ki", "name": "Kitchen"}, {"id": "lo", "name": "Lounge"}]
您应该掌控从后端获得的内容。您可以使用一些PHP函数来编码您需要的数据。如果您的数据包含例如由于错误导致的双引号怎么办？您会在label中看到正确的说明，但id和value将完全错误。

以下是如何调整控制组的示例，但这只是一种解决方法。您应该重新考虑从服务器（也可能返回）交换数据的方式。

$(document).on("pagebeforeshow", "#property-details-page", function() {
    loadAreas(["\"description \n quoted\" & a new line", "Bathroom", "Bedroom", "Kitchen", "Lounge"]);
});


function loadAreas(areas) {
    var container = $("#property-details-content");
    container.empty();
    var controlGroup = $('<fieldset id="areas" data-role="controlgroup" data-mini="true"></fieldset>');
    container.append(controlGroup);
    for (var i = 0, l=areas.length; i < l; i++) {
        var area = areas[i];
        var clean = area.replace(/[^A-Z0-9]/ig, "_");
        var control = $('<input type="radio" class="all-areas" name="property-area" id="' + clean + '" value="' + clean + '"><label for="' + clean + '">' + area + '</label>');
        controlGroup.append(control);
    }
    container.enhanceWithin();
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <link rel="stylesheet" href="style.css" />
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <div id="property-details-page" data-role="page">
    <div data-role="header" data-position="fixed">
      <h1>Property details</h1>
    </div>
    <div role="main" class="ui-content" id="property-details-content">
    </div>
  </div>
</body>
</html>

Jquery没有显示所有增强的动态附加单选按钮

2 个答案: