jQuery html elements dynamically, adding event handlers?

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>";
        }
    }
}

Scopey · Accepted Answer · 2014-12-16 20:38:18Z

2

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.

answered Dec 16, 2014 at 20:38

Scopey

6,3291 gold badge24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Logan Murphy · Accepted Answer · 2014-12-17 14:17:41Z

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.

edited Dec 17, 2014 at 14:17

answered Dec 16, 2014 at 20:37

Logan Murphy

6,2403 gold badges28 silver badges44 bronze badges

2 Comments

user4367185 Over a year ago

Hi, thank you both for your replays, however due to my utter lack of experience and the step learning curve I'm struggling to now where to place this code you both have provided and how i need to modify the existing code to make room for it. I've tried them both where i think they would go, but it still doesn't work.

Logan Murphy Over a year ago

i copy pasted your javascript...please note the comment to see the change i made

Collectives™ on Stack Overflow

jQuery html elements dynamically, adding event handlers?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related