在动态生成的情况下调用jQuery模式

Question

I'm trying to open a modal pop-up using dynamically generated content, so far it's not working well. My php code generates a set of elements with the title of the events, and when clicked on the title, I need to open a popup, again it's content is dynamic.

Following is my code:

<?php
echo '<span id="rentalRates" name="rentalRates" ><u style="cursor:pointer;"><h2>'.$row["header"].'</h2></u></b></span>
<div style="width:550px;overflow-y:auto;"  class="details"  id="divAuditoriumGuidelines">
<div id="divRentalRates'.$x.'"  title="Rental Rates" name = "divRentalRates'.$x.'">
<p>'.$row["longDescription"].'</p> </div>';
echo '</div>
<div  class="closer"></div>
</div>
</li>';
$x = $x + 1;
?>

Following is my jQuery:

$("#divRentalRates0").dialog(
{
    autoOpen: true,
    width: 750,
    height: 650,
    show:
    {
        effect: "blin",
        duration: 1000
    },
    hide:
    {
        effect: "explode",
        duration: 1000
    }
});

$("#rentalRates1").click(function()
{
    $("#divRentalRates0").dialog("open");
});

$("#rentalRates2").click(function()
{
    $("#divRentalRates0").dialog("open");
});

However, this doesn't work. But if I put a static modal popup outside the looping, it works fine. Can someone help me with this please?

Answer 1

$(document).on('click','#rentalRates1,#rentalRates1',function()
{
    $("#divRentalRates0").dialog("open");
});

The above code will work, but to be more specific,

Use this Solution :

$(document).on('click','[id^="rentalRates"]',function()
{
    $("#divRentalRates0").dialog("open");
});

Use event delegation - on()