CODEWITHSUNDEEP
javascriptjquerydom
turbonerd
turbonerd

Reputation: 1306

Running a function on an image created in the DOM

I'm using dataTables to retrieve, display and organise data from a PHP script (which in turn pulls the information from a MySQL database).

My dataTables table

Using the following code, dataTables retrieves the information and puts it into a.. well, table.

$('#content div').html( '<table id="example"></table>' );
var oTable = $('#example').dataTable( {
    "bJQueryUI": true,
    "bProcessing": true,
    "bServerSide": true,
    "sPaginationType": "full_numbers",
    "sAjaxSource": "dataTables.php",
    "aoColumns": [
        /* UID */           { "bSearchable": false,
                                "bVisible":  false },
        /* Datetime */      { "asSorting": [ "desc" ] },
        /* Staff Name */    null,
        /* Room */          null,
        /* Reason */        null,
        /* Urgency */       null,
        /* Processed? */    null ],
    "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
        var sDirectionClass;

        if ( aData[6] === null ) {
            sDirectionClass = "new";
            if ( row % 2 !== 0 )
                sDirectionClass = "new_odd";
        } else {
            sDirectionClass = "std";
        }

        row++;

        $(nRow).addClass( sDirectionClass );
        return nRow;
    }
} );

Most of this, I hope, is quite straightforward - this function takes the sAjaxSource property and looks at my dataTables.php file, which simply reads the MySQL DB and returns some information in a JSON-encoded format.

This all works fine, but I'm trying to turn one of my table's columns into a clickable link.

The brief PHP for this is;

if ( $aColumns[$i] == "Processed" )
{
    $link = '<img src="tick.png" id="' . $aRow[ $aColumns[0] ] . '" />';
    $row[] = ( empty( $aRow[ $aColumns[$i] ] ) ) ? $link : $aRow[ $aColumns[$i] ];
}

The pseudo for that is basically if Processed field is NULL display an image with the UID of that row; otherwise display the value of Processed field.

Check or date

What I'd like to do now is make that image JS-clickable to run an AJAX function. I thought that the following code (in situ immediately after the above JS):

oTable.find('img').click(function(){
    var process = $(this).attr("id");
    $.ajax({
        url: "check_alerts.php",
        data: { process: id }
    }).done(function() { 
        oTable.fnDraw(false);
    });
});

Unfortunately, it appears to do nothing. I'd imagine this is because the img I'm creating is created in the DOM and as such when the above function runs, it won't find any img tags.

How can I amend the code so that those images will run my AJAX function?

Thanks in advance,

Upvotes: 0

Views: 78

Answers (3)

Michiel
Michiel

Reputation: 274

To make sure that your new DOM elements also listen to the click event you should use "on".

oTable.on("click", "img", function() {
  var process = $(this).attr("id");
  $.ajax({
    url: "check_alerts.php",
    data: { process: id }
  }).done(function() { 
    oTable.fnDraw(false);
  });
});

See the documentation

Upvotes: 0

Tomer
Tomer

Reputation: 17930

You need to use the jquery.on() which is specifically meant to bind events on dynamic content.

Try this:

//replace table with the table pointer (class,id)
$('table').on('img','click',function(){
   //do your thing
});

Upvotes: 1

iMatoria
iMatoria

Reputation: 1448

Did you try using firebug to see if the image tag is generated. Than try running your image click binding function in firebug console tab. If that works than probably you are trying to bind the click event too soon in your original page execution cycle.

Upvotes: 0

Related Questions