JQuery 选择器找不到 ID
JQuery selector not finding ID
我正在为一个选择器问题绞尽脑汁,希望有人能提供一些见解。上下文是我正在开发一个 Mediawiki 扩展,它向编辑页面添加了一些企业特定的功能。最新的 GA MediaWiki 包含 JQuery 1.11.3。
在此代码段中,我尝试添加一个包含动态创建的部分 table。大部分代码都在工作,所以我有信心 JQuery 在环境中充分加载。导致警报语句的选择器(如果可搜索则尝试查找文本框)不起作用。文本框确实显示在页面上,IE 和 Edge 都将 ID 显示为评论中显示的内容。选择器的长度总是为零。我想知道我错过了什么。这是我处理各种引用语法的方式吗?你可以看到我试图通过使用数组源来简化 "source" 方面,而不是我想使用的 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);
}
谢谢,
贾森
根据 jQuery 的 selectors 文档,您需要使用两个反斜杠 \.
转义 .
To use any of the meta-characters ( such as
!"#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, it must
be escaped with with two backslashes: \. For example, an element with
id="foo.bar", can use the selector $("#foo\.bar").
所以
$selector = "#" + value.PortWizard.id + "-text";
你应该改成这个
$selector = "#" + value.PortWizard.id.replace(/\./g, "\\."); + "-text";
在选择器中使用元字符不是一个好主意。 @Griffith 已经正确地展示了如果它们确实存在于选择器中如何处理它们。作为替代方案,您可以使用 [id=<id>]
形式并引用值 <id>
,而不是使用选择器 #<id>
,如下所示:
$('[id="en.wikipedia.org"]')......
这是您在构造选择器字符串时可以轻松完成的事情:
$selector = "[id='" + value.PortWizard.id + "-text']";
$('[id="en.wikipedia.org"]').html(function(_, html) {
return html + ' FOUND';
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="en.wikipedia.org">TESTING</div>
我正在为一个选择器问题绞尽脑汁,希望有人能提供一些见解。上下文是我正在开发一个 Mediawiki 扩展,它向编辑页面添加了一些企业特定的功能。最新的 GA MediaWiki 包含 JQuery 1.11.3。
在此代码段中,我尝试添加一个包含动态创建的部分 table。大部分代码都在工作,所以我有信心 JQuery 在环境中充分加载。导致警报语句的选择器(如果可搜索则尝试查找文本框)不起作用。文本框确实显示在页面上,IE 和 Edge 都将 ID 显示为评论中显示的内容。选择器的长度总是为零。我想知道我错过了什么。这是我处理各种引用语法的方式吗?你可以看到我试图通过使用数组源来简化 "source" 方面,而不是我想使用的 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);
}
谢谢,
贾森
根据 jQuery 的 selectors 文档,您需要使用两个反斜杠 \.
.
To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \. For example, an element with id="foo.bar", can use the selector $("#foo\.bar").
所以
$selector = "#" + value.PortWizard.id + "-text";
你应该改成这个
$selector = "#" + value.PortWizard.id.replace(/\./g, "\\."); + "-text";
在选择器中使用元字符不是一个好主意。 @Griffith 已经正确地展示了如果它们确实存在于选择器中如何处理它们。作为替代方案,您可以使用 [id=<id>]
形式并引用值 <id>
,而不是使用选择器 #<id>
,如下所示:
$('[id="en.wikipedia.org"]')......
这是您在构造选择器字符串时可以轻松完成的事情:
$selector = "[id='" + value.PortWizard.id + "-text']";
$('[id="en.wikipedia.org"]').html(function(_, html) {
return html + ' FOUND';
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="en.wikipedia.org">TESTING</div>