jQuery html elements dynamically, adding event handlers? - php

Question

Ive spent several hours trying to resolve an issue with very limited experience with jQuery which is not helping me.
I am wanting to search a database for a list of results using a few input fields and then a submit button, when you click submit the values are passed to a .php script which returns the results and these are displayed in a table within a div container which works perfect.
Each record is then displayed in its own row within the table, with columns for different data.
record number name town etc
What i want is for the record number to be a click link of some kind, which when clicked, it then passes that value and does a different mysql request displaying that unique records data in more detail in a different div container. This is the part i cant get to work as i believe its something to do with BINDING, or the .ON which i dont really know anything or understand how it works, as my experience is very limited.
I have provided some sample code which consists of two files, jQuery.php and db.php, db.php is just simulating a database lookup for now (crude i know), to make it easier to show my code and what i am trying to do.
if you run jQuery.php and either enter a town (sheffield,rotherham) followed by click "get data" you get a refined list of results, if you just click get data you get all the results, you will see each results as a 4 dig ID Number, what i want to happen here is when you click that number it then loads just that record in a different div container, but its not working due to the dynamic content as i have read but don't understand.
You will see i have made an example of the reference number 1005 at the top of the page, and if you click on this, it loads that unique record fine, but i just can't get it to work with the ones in the table.
jquery.php
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".click").click(function() {
var recordid = $(this).attr("id");
$('#2').load("db.php?id=" +recordid);
});
$("#get").click(function() {
var town = $("#town").val();
$('#1').load("db.php?town="+town
);
});
});
</script>
OUTSIDE OF DYNAMIC HTML RECORD ID : - <a class = 'click' id = '1005'>1005</a><br>
<br>
Town <input type="textbox" id="town" ><br>
<button id="get">Get Data</button>
<br>
----<br>
*<div id="1" name='records_all'></div>
----<br>
*<div id="2" name='record_unique'></div>
----<br>
db.php ( crude code to simulate a db lookup, just for purpose of this problem )
<?php
$id = $_GET['id'];
$town = $_GET['town'];
echo "<pre>";
$data[]= array('id' => '1001', 'town' => 'sheffield', 'street' => 'national av', 'name' => 'neil');
$data[]= array('id' => '1002', 'town' => 'rotherham', 'street' => 'maple drive', 'name' => 'steve');
$data[]= array('id' => '1003', 'town' => 'leeds', 'street' => 'poplar drive', 'name' => 'john');
$data[]= array('id' => '1004', 'town' => 'rotherham', 'street' => 'exchange st', 'name' => 'claire');
$data[]= array('id' => '1005', 'town' => 'sheffield', 'street' => 'main street', 'name' => 'sarah');
$data[]= array('id' => '1006', 'town' => 'rotherham', 'street' => 'holderness rd', 'name' => 'jo');
if ($id) {
foreach ((array)$data as $key => $value) {
if ($data[$key]['id'] == $id) {
echo $data[$key]['id']."<br>";
echo $data[$key]['name']."<br>";
echo $data[$key]['street']."<br>";
echo $data[$key]['town']."<br>";
}
}
} else {
if ($town) {
foreach ((array)$data as $key => $value) {
if ($data[$key]['town'] == $town) {
$link = "<a class = 'click' id = '{$data[$key]['id']}'>{$data[$key]['id']}</a>";
echo "{$link} {$data[$key]['town']} {$data[$key]['name']}<br>";
}
}
} else {
foreach ((array)$data as $key => $value) {
$link = "<a class = 'click' id = '{$data[$key]['id']}'>{$data[$key]['id']}</a>";
echo "{$link} {$data[$key]['town']} {$data[$key]['name']}<br>";
}
}
}

Answer 1

You need to use event delegation to solve this issue. Look at the jQuery docs for .on here under the "Direct and delegated events" section
Try something like
$('#1').on('click', '.click', function() {
var recordid = $(this).attr("id");
$('#2').load("db.php?id=" +recordid);
});
This will work as long as the #1 element is in the DOM when the jQuery event bindings are run. Essentially you're binding the click event to the #1 element instead of having to bind it to elements after loading them in. The jQuery docs do a good job of explaining this.

Answer 2

If the elements are not in the DOM at the time of their jQuery selection then the events will not be added with the way you wrote your code. However alternatively you can write your code like this
$(document).ready(function() {
$(document).on('click', '.click', function() { //this is the only thing that changed
var recordid = $(this).attr("id");
$('#2').load("db.php?id=" +recordid);
});
$("#get").click(function() {
var town = $("#town").val();
$('#1').load("db.php?town="+town
);
});
});
This code should completely replace your javascript. It creates a live listener for all future elements in the document with the class click.