ajax不将html更新为动态创建的javascript div

（使用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 click

2） 然后，我单击下拉选项，通过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

控制台显示正在传递的正确的newContent，在控制台中，div元素显示带有newContent的正确html，但实际的页面div仍然显示“REPLACE CONTENT”（即不更新）

当下拉列表加载页面而不是通过javascript加载时，我已经成功地完成了这项工作。我想知道我是否不了解DOM加载东西的顺序，以及如何使其工作。出于某种原因，我认为如果我用javascript（而不是通过ajax）构建下拉列表，它会立即起作用。ajax会给出完全相同的结果，如果修复相同，我更喜欢它

我还注意到，下拉列表没有显示所选内容，即使正确的选择选项正在传递给ajax

非常感谢您的指点。谢谢

将以下内容替换为：

$('#newDiv').html(result['newContent']);

与：

---

当DOM动态更新时，您需要访问与文档相关的添加元素。

如果您愿意提供更多上下文，以便我们也可以分析“DOM加载内容的顺序”，您最好附加到“更改”而不是“单击”，或者它会触发多次。你能在JSFIDLE或codepen上发布一个工作演示吗？我会尝试发布一个演示。我认为新表单仍然没有绑定。当我将secondclick替换为$（'#newForm'）。在（'click'，'.secondclick'，函数（）{…在console中什么都不会发生。使用$（'#closestDiv'））事件正在正确触发，但即使控制台显示了它应该查找和替换的元素，也不会呈现到页面。这非常令人困惑，因为有些东西似乎已绑定，而另一些则未绑定。太棒了！这就解决了问题。非常感谢！您让我不用再去想如何将某些东西发布到JSFIDLE！；o）关于如何获取$（this）.prop（'selected'，true）；在必须引用父项时如何工作？$（'closestDiv）.find（'.secondClick option[value='+value+']'））.prop（'selected'，true）；似乎没有在下拉字段中显示所选选项的技巧（尽管它在下拉列表中显示为“选中”），并且提交表单不会从下拉列表中发布任何内容…我将尝试更多内容。谢谢！

$(document).find('#closestDiv #newDiv').html(result['newContent']);