Sunday 18 August 2013

.on not firing for dynamic list

.on not firing for dynamic list

I'm having issues with the .on firing on a dynamically generated table. I
have my code setup so it populates a div with a table dynamically when the
page loads. I'm using images as icons and for some reason I can't get the
.on to fire when the user clicks on an icon.
The ajax code I have works fine and fills my div with the required info.
Here is the php file that returns the data that the .on should work with:
(I'm new to jquery and just a hobby programmer! )
Here is the ajax code:
$.ajax({url: "load_agency_list.php",
data: "query=SELECT * FROM manual.agency_list",
type: "POST",
success: function(data){
//when user clicks info display Agency Information
$("#agency_list_window").html(data);
}
});



// start of .php file //
<table id="agency_table" class="inputtable ui-widget-content">
<th class="tbl_title_item"></th><th class="tbl_title_item">Agency Name:
</th><th class="tbl_title_item">V</th><th class="tbl_title_item">E</th>
<th class="tbl_title_item">D</th>
<?php
include("/includes/serv_connect.php");
$query = '';
if(!isset($_POST['query']))
{
echo("Sorry there was a problem loading the agency list.");
exit;
}
else
{
$query = mysql_escape_string($_POST['query']);
}
$getitems = mysql_query($query,$link);
while($eachrow = mysql_fetch_array($getitems, MYSQL_ASSOC))
{
echo("<tr class=\"tbl_item_format\">
<td>{$eachrow["agency_id"]}</td><td style=\"width:
400px\">{$eachrow["agency_name"]}</td>
<td>
<img alt=\"{$eachrow['agency_id']}\" class=\"ui-icon ui-icon-info
agencyitem\" src=\"/img/blank.png\"></td>
<td><img alt=\"{$eachrow['agency_id']}\" src=\"/img/blank.png\"
title=\"Edit Agency Information\"
class=\"ui-icon ui-icon-wrench editagencyitem\"></td>
<td><img alt=\"{$eachrow['agency_id']}\" src=\"/img/blank.png\"
class=\"delagency ui-icon ui-icon-trash\"></td></tr>");
}
?>
</table>
//end php file.
Now the code in the main file that is suppose to fire when click on the
info icon image.
$('#agency_table').on('click','.agencyitem',function() {
...some stuff here
});
Now I have tried narrowing down my selectors like $("#agency_table tr td
.agencyitem)... etc etc, but nothing.
I've tried various solutions with no success. Any help would be appreciated.
Thanks!

No comments:

Post a Comment