jQuery dialog selector not responding to the class name of elements loaded with Ajax -


update: problem solved:

since 'problematic' elements being created after moment page loadad, event delegation made sure of them bound jquery event.

original post:

i got piece of code:

while ($row=mysqli_fetch_array($res)){     if($cont>3){        $cont=1;        $txt=$txt.'</tr><tr>';     }     $txt=$txt.'<td>';      $txt=$txt.'<figure><img src="'.$row['picture'].'"/></figure>';     $txt=$txt.'<figcaption>'.$row['picturedesc'].'</figcaption>';      $txt=$txt.'<div class="dialoginfoopener" style="border:solid red 1px;">details</div>';      $txt=$txt.'</td>';         $cont++;  }    $txt=$txt.'</tr>'; echo $txt; 

it part of php file works along js file (ajax) in order "construct" table rows of 3 cells, concatenating strings. each cell, data loaded database. each cell places div given class (dialoginfoopener) , inline style. div element should clicked on in order open jquery dialog box - problem begins.

the code dialog box:

html

<div id="dialoginfo" title="product description">info put in here.</div> 

jquery

$("#dialoginfo").dialog({      autoopen: false,     buttons:[{         text: "close", click :          function(){             $(this).dialog("close");         }     }] });   $(".dialoginfoopener").click(function(event){</s>     $("#dialoginfo").dialog("open");</s> });</s> 

the code works wonderfully element class dialoginfoopener found on page, except any div elements belong table constructed. when clicking on these divs, won't (class , style attributes set correctly each cell). appears jquery not responding class names given divs. why?

i hope clear.

i'd appreciate helpful suggestions.

as these elements dynamically created, use event delegation, e.g:

$(document).on("click", ".dialoginfoopener", function(event){     $(".dialoginfo").dialog("open"); }); 

there's better selector use document - find consistent parent element of .dialoginfoopener elements , use instead.

also, think may have typo - html mentions elements #dialoginfo, inside click function using .dialoginfo? remember id's need unique, if have more one, use class.


Comments

Popular posts from this blog

php - SPIP: From Tag directly to an article -

jquery - isAjaxRequest always return false -

ruby on rails - In a controller spec, how to find a specific tag in the generated view? -