CODEWITHSUNDEEP
jquery
Lusty
Lusty

Reputation: 105

.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!

Upvotes: 1

Views: 47

Answers (2)

StackSlave
StackSlave

Reputation: 10627

Since you are using .ajax() and agencyitem is created as a response, your .on('click') method needs to happend inside your success: function(){*data first in here*/} after you data or it's undefined. In other words your HTML is not created yet, so you can't assign the .on() method. Try:

$.ajax({
  url: 'load_agency_list.php',  
  data: 'query=SELECT * FROM manual.agency_list',     
  type: 'POST',
  success: function(data){  
    $("#agency_list_window").html(data);
    // run your `.on()` method here
  }
});

Upvotes: 0

Shomz
Shomz

Reputation: 37701

Try $("#agency_list_window").on('click','.agencyitem',function() {...

And btw. you should stop using the mysql_* functions as they are deprecated. You should consider switching to mysqli_* or PDO instead. Also, using tables for layout... read about it.

Upvotes: 1

Related Questions