Question

我使用jQuery将远程HTML加载到DIV中，需要访问其中包含的所有元素和JS。好像插入的HTML被添加并正确呈现但元素不在DOM中。我如何访问这些新元素？使用document.getElementById（'myDiv'）返回null

var canvas ..在下面的脚本中返回null，我不明白为什么。

<script>

function draw(){
  var canvas=document.getElementById("pdf1");
  var pdf=canvas.getContext("2d");
// other code here populates canvas.....

}

</script>

<body>
<div>
<canvas  id="pdf1" width="801" height="1041"></canvas>
</div>
</body>
<script type="application/javascript">
$(window).load(draw());
</script>
</html>

Answer 1

$('#new_html_wrapper').load('file.html', function(){

    // Access the new DOM elements here inside the load callback.

    $(this).on('#myDiv','click',function(){
        alert('You clicked on myDiv!');
    });

    $('#myDiv', this).css('background','red');

});

// Accessing the elements here will fail as they haven't been loaded yet.

了解详情：http://api.jquery.com/load/

也不要使用document.getElementById('myDiv')。

你已经加载了jQuery，所以：$('#myDiv')。

Answer 2

如果您需要将事件绑定到这些新元素，请使用.on() function

Answer 3

您可能会尝试在插入HTML之前获取内容你应该尝试在插入内容后访问该元素。即如果在插入内容后调用相同的函数，则可以获取div中的内容。

或者如果你想绑定一些事件，比如点击，稍后出现的内容（插入数据就像你的情况一样），你可以实时绑定事件，如下所示

$（“div.className”）。live（“click”，function（）{alert（'1'）;}）
或
$（“document”）。on（“div.className”，“click”，function（）{alert（'1'）;}）

动态在DIV中插入HTML并访问新元素

3 个答案: