$('body').append($('#add-done-modal, #add-failed-modal', data));
此代码应将div
与id
add-done-modal
和add-failed-modal
追加到body
。那些div
在data
等其他内容中提供。我确定html
中的data
完全没问题。
代码永远找不到id
。我使用的是jQuery 3.3.1。
我知道课程是一种解决方案,但由于各种模式可以根据客户端呼叫而选择或不选择,因此会非常笨拙。
编辑:一个简单的$('#add-done-modal', data)
返回一个空的jQuery对象。我再一次确保#add-done-modal
位于data
。
编辑:此函数由click
事件调用:
function popup(url, name) {
$.get(url, (data) => {
$('#loading-modal .modal-body').html($('#product', data));
// Can't find '#add-done-modal' nor '#add-failed-modal'
let x = $('#add-done-modal', data);
x = $('#add-failed-modal', data);
$('body').append($('#add-done-modal, #add-failed-modal', data));
// Initialize jQuery-UI or Bootstrap stuff loaded above here. Working.
});
$('#loading-modal .modal-header .modal-title').html(name);
$('#loading-modal').modal('show');
}
以下是AJAX调用返回的内容:
<!DOCTYPE html>
<html lang="fr">
<head>
<!-- Head stuff -->
</head>
<body>
<div id="all">
<div class="top-bar">
<div class="container">
<div class="row d-flex align-items-center">
<div class="col-8 col-lg-9">
<form action="/updatelocale/" method="POST">
<select class="bs-select" onchange="this.form.submit();">
<!-- Locale options, can be disregarded -->
</select>
</form>
</div>
<div class="col justify-content-md-end">
<div class="row">
<!-- Login and some buttons, not used -->
</div>
</div>
</div>
</div>
</div>
<header class="nav-holder make-sticky">
<div id="navbar" role="navigation" class="navbar navbar-expand-lg">
<!-- A pretty navbar -->
</div>
</header>
<div id="heading-breadcrumbs">
<!-- Cute breadcrumbs -->
</div>
<div id="content">
<!-- Product, loading this from data works -->
<div id="product" class="container">
<div id="productMain" class="row">
<!-- Stuff inside #product -->
</div>
</div>
</div>
<footer class="main-footer">
<!-- Pretty footer -->
</footer>
</div>
<!-- Modal #add-done-modal -->
<div id="add-done-modal" tabindex="-1" role="dialog" aria-labelledby="add-done-modalLabel" aria-hidden="true" class="modal fade">
<div role="document" class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 id="add-done-modalLabel" class="modal-title">cart.add.done</h4>
<button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">cart.add.done.long</div>
<div class="modal-footer"><button data-dismiss="modal" class="btn">modal.close</button></div>
</div>
</div>
</div>
<!-- Modal #add-failed-modal -->
<div id="add-failed-modal" tabindex="-1" role="dialog" aria-labelledby="add-failed-modalLabel" aria-hidden="true" class="modal fade">
<div role="document" class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 id="add-failed-modalLabel" class="modal-title">cart.add.failed</h4>
<button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">cart.add.failed.long</div>
<div class="modal-footer"><button data-dismiss="modal" class="btn">modal.close</button></div>
</div>
</div>
</div>
<div id="login-modal" tabindex="-1" role="dialog" aria-labelledby="login-modalLabel" aria-hidden="true" class="modal fade">
<div role="document" class="modal-dialog">
<!-- I don't care about this modal -->
</div>
</div>
</body>
</html>
编辑:这是一个fiddle,有一些测试。将文档呈现给DOM后,$('#add-done-modal, #add-failed-modal')
和$('#add-done-modal')
会在它没有之前找到模态。
在第二个带有静态HTML的fiddle中,我检查了是否找到了模态,它们是。
HTML字符串的jQuery上下文长度是否有限制?
答案 0 :(得分:1)
如果您想正确使用HTML字符串,我建议将其解析为文档,例如
const domParser = new DOMParser()
const doc = domParser.parseFromString(data, 'text/html')
然后在jQuery选择器中使用doc
,例如
$('#add-done-modal', doc)
当jQuery遇到上下文时,它只是将表达式转换为...
jQuery(context).find(selector)
请参阅https://github.com/jquery/jquery/blob/3.3.1/src/core/init.js#L99
这里的问题是jQuery将整个文档解析为包含<body>
下的顶级元素的jQuery对象。见http://api.jquery.com/jQuery/#jQuery2
但是如果字符串看起来像是HTML片段,那么jQuery会尝试按照HTML描述创建新的DOM元素
例如,将您的HTML作为字符串...
$(html)
给了我一个包含15个元素的jQuery对象,主要是空文本和一些注释节点,但包括
#3 <div id="all">...</div>
#7 <div id="add-done-modal"...>...</div>
#11 <div id="add-failed-modal"...>...</div>
#13 <div id="login-modal"...>...</div>
使用此对象作为选择器 context ,您可以找到属于这些对象的子元素,但不能找到这些元素本身。这就是您可以找到#product
的原因。