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

Question

我从 ajax 调用中收到一个数组，并使用该数组的元素构建了一系列单选框。在我尝试刷新它们以应用 jqm 标记之前，它运行良好。我只看到预期的四分之二，或预期的三分之一。我创建了一个 fiddle 来说明问题，但 fiddle 根本没有应用标记，只是显示了正确的框数。 fiddle 是：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 来更改 "check" 上的按钮标签颜色：

<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 个框中的 2 个框，并且只有两个增强框可见。如果我希望收到 3 个盒子，我只会收到一个增强的盒子，另外两个盒子是隐形的。我运行 jquery 1.11 和 jqm 1.45。请帮忙。

Answer 1

我已经通过以下方式删除了双引号：

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

脚本运行良好。但是问题仍然存在，如果确实需要引号作为字符串的一部分怎么办？

Answer 2

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

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

[{"id": "br", "name": "Bathroom"}, {"id": "be", "name": "Bedroom"}, {"id": "ki", "name": "Kitchen"}, {"id": "lo", "name": "Lounge"}]
您应该控制从 back-end 中获得的内容。您可以使用一些 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 未显示所有增强的动态附加单选按钮

Jquery is not showing all enhanced dynamically appended radio buttons

css

arrays

ajax

jquery

jquery-mobile