Tuesday, 10 September 2013

jquery event on dynamically generated elements without hard coding each one

jquery event on dynamically generated elements without hard coding each one

My problem is like so:
I have these listings that i generate using javascript in my HTML:
<div class="row" id="reveal-listing-id">
<div class="large-12 columns">
<div class="panel">
<div class="row">
<div class="large-12 columns">
<div class="listing-header-container">
<div class="listing_header_section">15 Broad Steet
<span class="blue-pips">|</span> Unit #number
<span class="blue-pips">|</span> New York,
NY</div>
</div>
</div>
</div>
<div class="row listing" id="listing-id">
<p class="subtleFont">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut
wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate
and javascript that on click will reveal the div that contains all the
listing information which right now has id="listing-id". The java script
looks like:
$( "#reveal-listing-id" ).on( "click", function( event, ui ){
$( "#listing-id" ).toggle( "blind", 600);
});
Now i know for each HTML element i can easily place a unique ID and reveal
ID when i run my javascript to build them but how can i make onClick
events thats will reveal the corresponding DIV for the correct click
without hard coding each one?
For example i would not want to do something like:
$( "#reveal-listing-1" ).on( "click", function( event, ui ){
$( "#listing-1" ).toggle( "blind", 600);
});
$( "#reveal-listing-2" ).on( "click", function( event, ui ){
$( "#listing-2" ).toggle( "blind", 600);
});
$( "#reveal-listing-3" ).on( "click", function( event, ui ){
$( "#listing-3" ).toggle( "blind", 600);
});
$( "#reveal-listing-4" ).on( "click", function( event, ui ){
$( "#listing-4" ).toggle( "blind", 600);
});
The number of listings can be anywhere from 5 to 500 so i would need a
dynamic solution.

No comments:

Post a Comment