How to attach an Event Handler for dynamically generated Child divs?

问题

I have a page with 2 Div containers ( Left and Right ). PartsList page has 5 dynamically generated DIVS. Custom page has 5 dynamically generated DIVS. The div with id "layout" isnt getting recognized with the jQuery .on(). Please help. Thank you for you time :).

<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;
 }

?>

Custom

<?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>';

?>

回答1:

in jquery 1.7+ use on like

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

 //handler code here
});

in the earlier versions use delegate

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

 //handler code here
});

you can replace the document with parent element of the dynamically generated element

回答2:

From the Jquery online manual:

.load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] )

url: string containing the URL to which the request is sent.

data: map or string that is sent to the server with the request.

complete(responseText, textStatus, XMLHttpRequest)A callback function that is executed when the request completes.

You probably need to put the .on function as a callback of the .load for that Custom.php page.

Something like this EXAMPLE:

$(function() {

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

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

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

          }
 });
 });    

});

回答3:

I think you've got the wrong syntax for the .on() function it should be something like:

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

You bind to the document and when a user clicks on a child div in layout the event 'bubbles' up the DOM to the document where it is caught.

回答4:

Okay. I found the answer anyhow. For people who were thinking why it didnt work. It was because of the stupid QUOTES.

$("document") should have been $(document) since document isnt a tag <.

And tada thats it.

Sigh.

Thanks for the help everyone :)

来源：https://stackoverflow.com/questions/10776995/how-to-attach-an-event-handler-for-dynamically-generated-child-divs

标签

php

jquery

dynamic