Javascript JQuery选择器找不到ID

我的头撞到了选择器的问题上，希望有人能有所洞察。上下文是我正在开发一个Mediawiki扩展，该扩展在编辑页面上添加了一些特定于企业的功能。最新的GA MediaWiki包含JQuery 1.11.3

在这个代码段中，我试图添加一个带有动态创建的表的节。大部分代码都在工作，因此我相信JQuery在环境中的加载是充分的。通向alert语句的选择器（如果可搜索，则尝试查找文本框）不起作用。文本框确实会显示在页面上，IE和Edge都会显示注释中显示的ID。选择器的长度总是为零。我想知道我错过了什么。这是我处理各种引用语法的方式吗？您可以看到，我试图通过使用数组源来简化“源”方面，而不是我想要使用的JSON源，因此如果您尝试测试，请使用“Charl”作为测试短语

function addProviders(subjectType, data) {
var title = mw.config.get("wgTitle");
var html = '<div class="mw-portwizard-sourcelist" id = "mw-portwizard-sourcelist"></div>';

if (!$('#mw-portwizard-sourcelist').length) {
    $(".templatesUsed").after (html);
}

html = '<div tabindex="0" id="mw-portwizard-sourcelistcontent" class="mw-editfooter-toggler mw-icon-arrow-expanded ui-widget" role="button"><p>Sources available for this page:</p></div>';
$('#mw-portwizard-sourcelist').html(html);
html =  '<table id="mw-portwizard-sourcetable"><tbody></tbody></table>';
$('#mw-portwizard-sourcelistcontent').html(html);

var tbody = $("#mw-portwizard-sourcetable").children('tbody');
var table = tbody.length ? tbody : $("#mw-portwizard-sourcetable");
mw.log ("table:" + table);
//TODO: use jquery data to hold the type
//html += '<input type="hidden" value="' + type +'" name="mw-portwizard-sourcetype" id="mw-portwizard-sourcetype" />';

//TODO: Make this WORK!
$.each(data, function(index,value) {
    var html = "<tr id='" + value.PortWizard.id +"-row'><td>" + value.PortWizard.url + "</td><td>" + (value.PortWizard.searchable ? '<input type="text" id="' + value.PortWizard.id +'-text" value="' + title + '">' : title) + "</td></tr>";
    table.append(html);

    if (value.PortWizard.searchable) {
        $selector = "#" + value.PortWizard.id + "-text";
//      $selector = "#en.wikipedia.org-text";en.wikipedia.org-text
        $prompt = $selector + ":" + $($selector).length; 
        alert ($prompt);
        $($selector).autocomplete({ 
/*            source: function(request, response) { 
                     new mw.Api().get( {
                        action: 'PortWizard',
                        provider: value.PortWizard.id,
                        subjectType: 'search',
                        query: request.term                         
                  }).done( function (data){
                      response(data);
                  });
            },*/
            source: ["Charles De Gaulle Airport", "Charlie Brown"],
            minLength :3
        });
    });
}

html += "<button type=\"button\" onclick=\"getPageContent(event,'" + subjectType + "')\">Get Text</button>";

$('#mw-portwizard-sourcelist').append(html);

函数addProviders（subjectType，数据）{
var title=mw.config.get（“wgttitle”）；
var html=''；
if（！$（'#mw portwizard sourcelist'）.length）{
$（“.templatesUsed”）。在（html）之后；
}
html='可用于此页面的源代码：
；
$（'#mw portwizard sourcelist'）.html（html）；
html=''；
$（'#mw portwizard sourcelistcontent'）.html（html）；
var tbody=$（“#mw portwizard sourcetable”）.children（'tbody'）；
var table=tbody.length？tbody:$（“#mw portwizard sourcetable”）；
mw.log（“表：”+表）；
//TODO:使用jquery数据保存类型
//html+=''；
//托多：让这一切顺利！
$.each（数据、函数（索引、值）{
var html=”“+value.PortWizard.url++（value.PortWizard.searchable？“”：标题）+”；
表1.append（html）；
if（value.PortWizard.searchable）{
$selector=“#”+value.PortWizard.id+“-text”；
//$selector=“#en.wikipedia.org text”en.wikipedia.org-text
$prompt=$selector+“：“+$（$selector）.length；
警报（$提示）；
$（$选择器）.自动完成（{
/*来源：功能（请求、响应）{
新的mw.Api（）.get（{
操作：“端口向导”，
提供程序：value.PortWizard.id，
subjectType:“搜索”，
查询：request.term
}).完成（功能（数据）{
答复（数据）；
});
},*/
资料来源：[“戴高乐机场”、“查理·布朗”]，
最小长度：3
});
});
}
html+=“获取文本”；
$（'#mw portwizard sourcelist'）.append（html）；

}

谢谢

---

Jason

根据jQuery的文档，您需要使用两个反斜杠来转义

。

要使用任何元字符（例如 ！“#$%&'（）*+，./：；？@[]^`{124;}~）作为名称的文字部分，它必须 使用两个反斜杠转义：\。例如，一个元素 id=“foo.bar”，可以使用选择器$（“#foo\.bar”）

所以不是

$selector = "#" + value.PortWizard.id + "-text";

你应该换成这个

$selector = "#" + value.PortWizard.id.replace(/\./g, "\\\\."); + "-text";

---

在选择器中使用元字符不是一个好主意。@Griffith已经正确地演示了如何处理选择器中确实存在的元字符。作为替代方法，您可以使用

#

格式

[id=]

并引用值

，如下所示：

$('[id="en.wikipedia.org"]')......

这是在构造选择器字符串时可以轻松执行的操作：

$selector = "[id='" + value.PortWizard.id + "-text']";

$（'[id=“en.wikipedia.org”]'）.html（函数（\ux，html）{
返回html+“已找到”；
})；

测试

value.PortWizard.id的示例值是什么？我测试的id是“en.wikipedia.org”。它是JSON响应的一部分，还包括URL（字符串）、可搜索（布尔值）和已验证（也是布尔值）等属性。这是一个很好的问题，让我想知道值中的句点是否会产生这个问题，我需要重新考虑我的命名惯例。谢谢。另一篇文章详细介绍了如何有力地做到这一点。