Question

I’m just new here. So here’s where I’m stuck:

I created an html table using javascript. I have a button,which when clicked, will create set of tables with exactly the same structure but the objects(eg. button, text) inside those tables have different ID’s. Now when I try to execute a click function using jQuery with a button on one of the produced tables, it won’t work. How do I go around here? Thanks in advance!

Here’s a sample function which creates the html table(with unique ID’s) in javascript:

function CreateTables() {

    var html = ' ';
    var valPrompt = prompt("How many tables would you like to add?");
    parseInt(valPrompt);
    for (i = 1; i <= valPrompt; i++) {

        html += "<table>" + "<tr>" + "<td>" + "Text goes here" + "</td>" + "<td>" + "<input type='text' id='txtTEXT" + i + "'/>" + "</td>" + "<td>" + < input type = 'button'
        id = 'btnALERT" + i + "' / > +"</td>" + "</tr>" + "</table>"
    }
    document.getElementById('HtmlPlaceHolder').innerHTML = html;
}​

So, if we review the code, Sets of table with buttons(btnALERT) with unique ID’s will be created if the function CreateTables is executed. In order to select the objects, I suppose I’ll be using jQuery. So for example, if I bind a handler in btnALERT1(produced by CreateTables) say a click function in order to alert a simple “Hello”, how will I do this? My code for this doesn’t seem to work:

$(document).ready(function() {
    $('#btnALERT1').click(function() {
        alert("Hello");
    });
});​

Answer 1

Use .live() (for older jquery versions – < v1.7):

$('#btnALERT1').live('click', function()
{
   alert("Hello");
});

Or:

$(document).delegate('#btnALERT1', 'click', function() 
{
   alert("Hello");
});

Use .on() (for new jquery versions – >= 1.7):

$(document).on('click', '#btnALERT1', function()
{
   alert("Hello");
});