Question

我有一个包含2个Div容器（左和右）的页面。 PartsList页面有5个动态生成的DIVS。自定义页面有5个动态生成的DIVS。 id为“layout”的div无法通过jQuery .on（）识别。请帮忙。谢谢你的时间:)。

<script type="text/javascript" src="js/jquery.js">
</script>

<script type="text/javascript">

$(function() {

    $(".left").load("PartsList.php",function() {alert("success");});

    $(".right").load("Custom.php", function() {alert("success");});

        $("#layout").children().on({click: function() {
            alert($(this).attr('id'));

          }
 });    

});
</script>

<body>
<div class="main">

<div class="left">
//Load Left page.

</div>
<div class="right">

//Load Structure page.
</div>

</div>
</body>


</html>

PartsList

<?php


for ($x = 1; $x < 6; $x++)
{

   $divs = <<<here
   <div id = 'div$x' class = 'list'><strong>Div: $x</strong></div>
   here;
   echo $divs;
 }

?>

定制

<?php

echo '<div id="layout">';

for ($y = 0; $y < 5; $y++)
{
        echo "<div id='x$y' style='
        position: absolute;
        width: 200px;
        height: 100px;
        top: ".(100 * $y)."px;
        border: 2px solid blue;
        cursor: pointer;
        '></div>";
}

echo '</div>';

?>

Answer 1

在jquery 1.7+中使用on喜欢

$(document).on('click','dynamicElement',function(e){

 //handler code here
});

早期版本中的

使用delegate

$(document).delegate('dynamicElement','click',function(e){

 //handler code here
});

您可以将document替换为动态生成元素的父元素

Answer 2

来自Jquery在线手册：

.load（url [，data] [，complete（responseText，textStatus，XMLHttpRequest）]）

url：包含请求发送到的URL的字符串。

data：与请求一起发送到服务器的映射或字符串。

complete（responseText，textStatus，XMLHttpRequest）请求完成时执行的回调函数。

您可能需要将.on函数作为Custom.php页面的.load回调。

像这样的例子：

$(function() {

    $(".left").load("PartsList.php",function() {alert("success");});

    $(".right").load("Custom.php", function() {alert("success");

        $("#layout").children().on({click: function() {
            alert($(this).attr('id'));

          }
 });
 });    

});

Answer 3

我认为你的.on（）函数的语法错误，它应该是这样的：

$('document').on('click', '#layout > div', function() {
    alert($(this).attr('id'));
});

绑定到文档，当用户点击布局中的子div时，事件会将DOM“冒泡”到捕获它的文档中。

Answer 4

好。无论如何我找到了答案。对于那些想到它为什么不起作用的人。这是因为愚蠢的QUOTES。

$（“document”）应该是$（文档），因为文档不是标记＆lt;。

tada就是这样。

叹息。

感谢大家的帮助:)。

如何为动态生成的子div附加事件处理程序？

4 个答案: