Jquery 没有显示所有增强的动态附加单选按钮
Posted
技术标签:
【中文标题】Jquery 没有显示所有增强的动态附加单选按钮【英文标题】：Jquery is not showing all enhanced dynamically appended radio buttons 【发布时间】：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>
$(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 中没有位置。 【参考方案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,'');
脚本运行良好。但是，问题仍然存在，如果您确实需要引号作为字符串的一部分，该怎么办？
【讨论】：
以上是关于Jquery 没有显示所有增强的动态附加单选按钮的主要内容，如果未能解决你的问题，请参考以下文章