Warning: INSERT command denied to user 'o4077762'@'infong892.perfora.net' for table 'watchdog' query: INSERT INTO watchdog (uid, type, message, variables, severity, link, location, referer, hostname, timestamp) VALUES (0, 'php', '%message in %file on line %line.', 'a:4:{s:6:\"%error\";s:14:\"strict warning\";s:8:\"%message\";s:102:\"Declaration of views_plugin_style_default::options() should be compatible with views_object::options()\";s:5:\"%file\";s:102:\"/homepages/27/d313962189/htdocs/poon.co/sites/all/modules/views/plugins/views_plugin_style_default.inc\";s:5:\"%line\";i:24;}', 3, '', 'http://poon.co/node/1491', '', '18.208.126.232', 1660306797) in /homepages/27/d313962189/htdocs/poon.co/includes/database.mysql.inc on line 135

Warning: INSERT command denied to user 'o4077762'@'infong892.perfora.net' for table 'watchdog' query: INSERT INTO watchdog (uid, type, message, variables, severity, link, location, referer, hostname, timestamp) VALUES (0, 'php', '%message in %file on line %line.', 'a:4:{s:6:\"%error\";s:14:\"strict warning\";s:8:\"%message\";s:151:\"Declaration of calendar_plugin_display_page::options_submit() should be compatible with views_plugin_display_page::options_submit(&$form, &$form_state)\";s:5:\"%file\";s:108:\"/homepages/27/d313962189/htdocs/poon.co/sites/all/modules/calendar/includes/calendar_plugin_display_page.inc\";s:5:\"%line\";i:297;}', 3, '', 'http://poon.co/node/1491', '', '18.208.126.232', 1660306797) in /homepages/27/d313962189/htdocs/poon.co/includes/database.mysql.inc on line 135

Warning: INSERT command denied to user 'o4077762'@'infong892.perfora.net' for table 'watchdog' query: INSERT INTO watchdog (uid, type, message, variables, severity, link, location, referer, hostname, timestamp) VALUES (0, 'php', '%message in %file on line %line.', 'a:4:{s:6:\"%error\";s:14:\"strict warning\";s:8:\"%message\";s:104:\"Declaration of calendar_plugin_display_page::options() should be compatible with views_object::options()\";s:5:\"%file\";s:108:\"/homepages/27/d313962189/htdocs/poon.co/sites/all/modules/calendar/includes/calendar_plugin_display_page.inc\";s:5:\"%line\";i:297;}', 3, '', 'http://poon.co/node/1491', '', '18.208.126.232', 1660306797) in /homepages/27/d313962189/htdocs/poon.co/includes/database.mysql.inc on line 135

Warning: INSERT command denied to user 'o4077762'@'infong892.perfora.net' for table 'watchdog' query: INSERT INTO watchdog (uid, type, message, variables, severity, link, location, referer, hostname, timestamp) VALUES (0, 'php', '%message in %file on line %line.', 'a:4:{s:6:\"%error\";s:14:\"strict warning\";s:8:\"%message\";s:105:\"Declaration of calendar_plugin_display_block::options() should be compatible with views_object::options()\";s:5:\"%file\";s:109:\"/homepages/27/d313962189/htdocs/poon.co/sites/all/modules/calendar/includes/calendar_plugin_display_block.inc\";s:5:\"%line\";i:78;}', 3, '', 'http://poon.co/node/1491', '', '18.208.126.232', 1660306797) in /homepages/27/d313962189/htdocs/poon.co/includes/database.mysql.inc on line 135

Warning: INSERT command denied to user 'o4077762'@'infong892.perfora.net' for table 'watchdog' query: INSERT INTO watchdog (uid, type, message, variables, severity, link, location, referer, hostname, timestamp) VALUES (0, 'php', '%message in %file on line %line.', 'a:4:{s:6:\"%error\";s:14:\"strict warning\";s:8:\"%message\";s:163:\"Declaration of calendar_plugin_display_attachment::options_submit() should be compatible with views_plugin_display_attachment::options_submit(&$form, &$form_state)\";s:5:\"%file\";s:114:\"/homepages/27/d313962189/htdocs/poon.co/sites/all/modules/calendar/includes/calendar_plugin_display_attachment.inc\";s:5:\"%line\";i:242;}', 3, '', 'http://poon.co/node/1491', '', '18.208.126.232', 1660306797) in /homepages/27/d313962189/htdocs/poon.co/includes/database.mysql.inc on line 135

Warning: INSERT command denied to user 'o4077762'@'infong892.perfora.net' for table 'watchdog' query: INSERT INTO watchdog (uid, type, message, variables, severity, link, location, referer, hostname, timestamp) VALUES (0, 'php', '%message in %file on line %line.', 'a:4:{s:6:\"%error\";s:14:\"strict warning\";s:8:\"%message\";s:110:\"Declaration of calendar_plugin_display_attachment::options() should be compatible with views_object::options()\";s:5:\"%file\";s:114:\"/homepages/27/d313962189/htdocs/poon.co/sites/all/modules/calendar/includes/calendar_plugin_display_attachment.inc\";s:5:\"%line\";i:242;}', 3, '', 'http://poon.co/node/1491', '', '18.208.126.232', 1660306797) in /homepages/27/d313962189/htdocs/poon.co/includes/database.mysql.inc on line 135

Warning: INSERT command denied to user 'o4077762'@'infong892.perfora.net' for table 'watchdog' query: INSERT INTO watchdog (uid, type, message, variables, severity, link, location, referer, hostname, timestamp) VALUES (0, 'php', '%message in %file on line %line.', 'a:4:{s:6:\"%error\";s:14:\"strict warning\";s:8:\"%message\";s:151:\"Declaration of calendar_plugin_display_ical::options_submit() should be compatible with views_plugin_display_page::options_submit(&$form, &$form_state)\";s:5:\"%file\";s:113:\"/homepages/27/d313962189/htdocs/poon.co/sites/all/modules/calendar/calendar_ical/calendar_plugin_display_ical.inc\";s:5:\"%line\";i:217;}', 3, '', 'http://poon.co/node/1491', '', '18.208.126.232', 1660306797) in /homepages/27/d313962189/htdocs/poon.co/includes/database.mysql.inc on line 135

Warning: INSERT command denied to user 'o4077762'@'infong892.perfora.net' for table 'watchdog' query: INSERT INTO watchdog (uid, type, message, variables, severity, link, location, referer, hostname, timestamp) VALUES (0, 'php', '%message in %file on line %line.', 'a:4:{s:6:\"%error\";s:14:\"strict warning\";s:8:\"%message\";s:134:\"Declaration of date_handler_field_multiple::pre_render() should be compatible with content_handler_field_multiple::pre_render($values)\";s:5:\"%file\";s:99:\"/homepages/27/d313962189/htdocs/poon.co/sites/all/modules/date/date/date_handler_field_multiple.inc\";s:5:\"%line\";i:185;}', 3, '', 'http://poon.co/node/1491', '', '18.208.126.232', 1660306797) in /homepages/27/d313962189/htdocs/poon.co/includes/database.mysql.inc on line 135

Warning: INSERT command denied to user 'o4077762'@'infong892.perfora.net' for table 'watchdog' query: INSERT INTO watchdog (uid, type, message, variables, severity, link, location, referer, hostname, timestamp) VALUES (0, 'php', '%message in %file on line %line.', 'a:4:{s:6:\"%error\";s:14:\"strict warning\";s:8:\"%message\";s:102:\"Declaration of calendar_view_plugin_style::options() should be compatible with views_object::options()\";s:5:\"%file\";s:106:\"/homepages/27/d313962189/htdocs/poon.co/sites/all/modules/calendar/includes/calendar_view_plugin_style.inc\";s:5:\"%line\";i:173;}', 3, '', 'http://poon.co/node/1491', '', '18.208.126.232', 1660306797) in /homepages/27/d313962189/htdocs/poon.co/includes/database.mysql.inc on line 135

Warning: INSERT command denied to user 'o4077762'@'infong892.perfora.net' for table 'watchdog' query: INSERT INTO watchdog (uid, type, message, variables, severity, link, location, referer, hostname, timestamp) VALUES (0, 'php', '%message in %file on line %line.', 'a:4:{s:6:\"%error\";s:14:\"strict warning\";s:8:\"%message\";s:136:\"Declaration of calendar_plugin_style_ical::init() should be compatible with views_plugin_style::init(&$view, &$display, $options = NULL)\";s:5:\"%file\";s:111:\"/homepages/27/d313962189/htdocs/poon.co/sites/all/modules/calendar/calendar_ical/calendar_plugin_style_ical.inc\";s:5:\"%line\";i:254;}', 3, '', 'http://poon.co/node/1491', '', '18.208.126.232', 1660306797) in /homepages/27/d313962189/htdocs/poon.co/includes/database.mysql.inc on line 135

Warning: INSERT command denied to user 'o4077762'@'infong892.perfora.net' for table 'watchdog' query: INSERT INTO watchdog (uid, type, message, variables, severity, link, location, referer, hostname, timestamp) VALUES (0, 'php', '%message in %file on line %line.', 'a:4:{s:6:\"%error\";s:14:\"strict warning\";s:8:\"%message\";s:102:\"Declaration of calendar_plugin_style_ical::options() should be compatible with views_object::options()\";s:5:\"%file\";s:111:\"/homepages/27/d313962189/htdocs/poon.co/sites/all/modules/calendar/calendar_ical/calendar_plugin_style_ical.inc\";s:5:\"%line\";i:254;}', 3, '', 'http://poon.co/node/1491', '', '18.208.126.232', 1660306797) in /homepages/27/d313962189/htdocs/poon.co/includes/database.mysql.inc on line 135
JQuery .on(), Late Binding and Delegated Event | Lawrence Poon

JQuery .on(), Late Binding and Delegated Event

Printer-friendly versionPDF version

It is very easy for JQuery to handle events triggered on objects which are present before the binding (Assignment of event-handlers to an action executed on an object). To handle late binding (objects are not present before the binding) is a bit tricky.

The introduction of .on() in current release of JQuery has replaced .bind(), .live() and .delegate(). However, .on() has to been used on existing objects. How to use .on() to bind events to non-existing objects? Delegate object comes to the scene. In this example, the codes are from a church library system I wrote years ago. When a library item is scanned and checked out, sendItemBarcode() is called and the data is sent to a back end script thru AJAX, in return, a new row is inserted into a HTML table (#theContent). The new row has a remove button (with a class .theRemove). Here we delegate the click event of the existing object (#theContent) to non-existing object (the remove buttons, the buttons with class .theRemove). When a remove button is clicked, the back end script ajax_checkout.php is called thru AJAX.

The id of the button can be found from :

var barcode = $(this).parent().parent().attr('id');

<script>
$("#theContent").on('click',"tr td input.theRemove[type=button]", function(event){

                event.preventDefault();
               
             var barcode = $(this).parent().parent().attr('id');
                     
             $.post("ajax_checkout.php",{ action: 'remove_item',barcode: barcode,user_id: $('#theUserID').data('user_id')},
            function(data){
                if(data.status=='success'){

                $("#theMessage").html(data.message);
                 var theItemID = data.content.barcode;
                    
                 $("#"+theItemID).remove();
    

                 } else {
                $("#theMessage").html(data.message);
                }

            }, "json");


            });


function sendItemBarcode(b){
            $.post("ajax_checkout.php",{ action: 'add_item', barcode: b, user_id : $('#theUserID').data('user_id') },
            function(data){
                if(data.status=='success'){

                  $('#theMessage').html(data.message);
                 
                    var theItemID = data.content.barcode;
       var insert = '<tr id="'+theItemID+'"><td>' + data.content.author + ' : ' + data.content.title + '</td><td><input class="theRemove" type="button" value="Remove" /></td></tr>';

                    $('#theContent').append(insert);

                    $('#theReset').show();
                    $('#theConfirm').show();
                } else {
                  $('#theMessage').html(data.message);
                }
            }, "json");
</script>