ajax不将html更新为javascript动态创建的div
ajax不将html更新为javascript动态创建的div
提问于 2020-04-18 11:46:19
(使用jQuery)
1)我有一个单击的javascript，它创建一个带有下拉菜单和div的表单，如下所示：
$('#closestDiv').on('click','.firstClick', function(event){
var pass = $(this).attr('data-pass');
var f = document.createElement("form");
f.setAttribute('method',"post");
f.setAttribute('id',"newForm");
f.setAttribute('action',"SubmitForm.php");
var d = document.createElement("select");
var op1 = new Option();
op1.value = "1";
op1.text = "1";
op1.setAttribute('class', "secondClick");
op1.setAttribute('data-pass', pass);
d.options.add(op1);
f.appendChild(d);
var div = document.createElement("div");
div.setAttribute('id', "newDiv");
div.innerHTML = 'REPLACE CONTENT';
f.appendChild(div);
$("#closestDiv").append(f);
}); // end on click2)然后我有一个onclick的下拉选项，通过ajax将内容加载到上述div中。
$('#closestDiv').on('click', '.secondClick', function () {
$(this).prop('selected', true);
var value = $(this).attr('value');
var pass = $(this).attr('data-pass');
$.ajax({
url: 'getContent.php',
type: "get",
data : {value: value, pass: pass},
success: function(response){
var result = JSON.parse(response);
$('#newDiv').html(result['newContent']);
console.log(result['newContent']);
console.log($('#newDiv'));
} // end success function
}); // end ajax call
}); // end on click控制台显示传递了正确的内容，而在控制台中，div元素使用newContent显示了正确的newContent，但实际的页面div仍然显示“替换内容”(即不更新)。
当dropdown与页面一起加载而不是通过javascript加载时，我已经成功地做到了这一点。我想知道我是不是不理解DOM加载东西的顺序，以及如何使其工作。出于某种原因，我认为如果我用javascript构建下拉菜单(而不是通过ajax -它会产生几乎相同的结果，如果修复是相同的，我更喜欢这样做……)它会立即变得有功能。
我还注意到，下拉菜单没有显示所选的内容，即使正确的所选选项正在传递给ajax。
非常感谢您的任何指点。谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-04-19 12:01:36
将下面的内容替换为：
$('#newDiv').html(result['newContent']);通过以下方式：
$(document).find('#closestDiv #newDiv').html(result['newContent']); 当DOM动态更新时，您需要访问与文档相关的添加元素。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61283996
复制相关文章
相似问题
腾讯云开发者
