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

Question

(使用 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)然后我有一个下拉选项的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

控制台显示正在传递的正确的 newContent，并且在控制台中 div 元素显示带有 newContent 的正确 html，但实际页面 div 仍然显示“替换内容”(即不更新)。

当下拉列表与页面一起加载而不是通过 JavaScript 加载时，我已经成功完成了此操作。我想知道我是否不理解 DOM 加载内容的顺序，以及如何使其工作。出于某种原因，我认为如果我用 javascript 构建下拉菜单(而不是通过 ajax - 它几乎给出相同的结果，并且如果修复相同的话我更喜欢它......)它会立即发挥作用。

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

非常感谢任何指点。谢谢!

Answer 1

将下面替换为:

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

与:

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

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