call jquery modal in dynamically generated <span>

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?

event delegation

Dhaval Marthak
– Dhaval Marthak

2014-06-03 09:07:47 +00:00
Commented Jun 3, 2014 at 9:07 — Dhaval Marthak
– Dhaval Marthak, Commented Jun 3, 2014 at 9:07

Shaunak D · Accepted Answer · 2014-06-03 09:19:23Z

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()

edited Jun 3, 2014 at 9:19

answered Jun 3, 2014 at 9:13

Shaunak D

20.7k10 gold badges48 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

call jquery modal in dynamically generated <span>

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related