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

【问题标题】：Jquery is not showing all enhanced dynamically appended radio buttonsJquery 没有显示所有增强的动态附加单选按钮
【发布时间】：2017-06-06 02:49:27
【问题描述】：

我从 ajax 调用接收到一个数组，并使用该数组的元素构建了一系列单选框。在我尝试刷新它们以应用 jqm 标记之前，它运行良好。我只看到四分之二的预期，或三分之二的预期。我创建了一个小提琴来说明问题，但小提琴根本没有应用标记，只是显示了正确数量的框。小提琴是：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。请帮忙。

【问题讨论】：

更新，刚刚进来。数组值来自ajax调用，每个都用双引号括起来。当我尝试在没有 ajax 的情况下运行它时，只需手动构建数组，值就没有引号了，一切都很顺利。那么为什么双引号会影响我的代码呢？
所以你现在的问题是，如何删除双引号？顺便说一句，你的小提琴不工作。
这是我的第一个小提琴 ;-) ，它向我展示了附加的单选框......无论如何，我现在已经删除了双引号并且脚本按预期工作。我现在将我的问题标记为已回答。我不需要这些报价。但是，如果您确实想要引号，问题仍然是怎么办？
如果你调整你的问题以反映真正的问题会很好，这样它可能会帮助其他人，因为这不是与 JQM 相关的问题。请在没有 JQM 的情况下检查您的标记，看看值和 id 中的双引号会发生什么。
我不知道如何调整原始问题...但你是对的，引号在 ids 中没有位置。

标签： jquery css arrays ajax jquery-mobile

【解决方案1】：

这不是 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>

【讨论】：

感谢您提供此示例。这是一种更简洁的方式。我只是一个为朋友构建物业管理工具的业余爱好者。我发现 javascript 令人不安，因为您可以通过多种方式做同样的事情。我在插入数据库之前清理用户输入，只允许字符、数字和空格。我怀疑引号是由json ajax 调用中的编码和解码添加的。我将尝试解决此问题，以便客户端无需执行任何操作。
@Voytek：是的，第一个和最后一个双引号来自 JSON.stringify，如果我的回答对您有帮助，请考虑接受。

【解决方案2】：

我已经删除了双引号：

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

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

【讨论】：