jQuery UI Dialog Not Working with Tabulator or Handsontable

[mongoose00318]

I've got a big table of data and I've got 5 columns with bootstrap buttons that when clicked open a dialog box which allows the user to affect an order status. The code works fine until it's put into Handsontable...I couldn't get that to work and it had a lot more functionality than I really needed since all I really need is pagination and an ability to search the data with an ajax search.

I switched over to Tabulator hoping the issue could be solved. But it's doing the exact same thing. If I inspect the code and copy one of the pre-generated buttons out of the table and paste it outside the tables div container; the dialog opens just fine. I don't see much on the web about trying to do this either. 

Here is a couple screenshots: 

• https://imgur.com/233W0jD
• https://imgur.com/qOR7NNf

If I click the two buttons up top, which are copied right from the source code, they work fine. Any of the buttons in the table don't work (not counting the ones which are disabled).

Here's the code which opens the dialog:

		//on document load
		$(document).ready(function() {
			$( '#datepicker-container' ).hide(); //hide datepicker-container
			$( '#delay-container' ).hide(); //hide delay-container
			$( '#finish-container' ).hide(); //hide finish-container
			$( '#datepicker' ).datepicker(); //initialize datepicker
			
			//disable change order status dialog by default
			$('#change_order_status_dialog').dialog({
				autoOpen:false,
				width:600
			});

			//open change order status dialog when user clicks change status button(s)
			$('.btn_change_order_status_dialog').click(function(){
				//get data from button
				var from_order_id 			= $(this).data('order-id'); //get order id
				var from_order_number 		= $(this).data('order-number'); //get order number
				var from_order_enterprise	= $(this).data('order-enterprise'); //get enterprise
				var from_dept_code			= $(this).data('dept-code'); //get dept code
				
				//dialog box data containers
				var to_order_id 			= $('h5 span#order_id'); //get order id
				var to_order_number 		= $('h5 span#order_number'); //get order number
				var to_order_enterprise		= $('h5 span#enterprise'); //get enterprise
				var to_dept_code			= $('h5 span#dept_code'); //get dept code
				
				//update values in dialog box before showing user
				to_order_id.text(from_order_id); //set order id
				to_order_number.text(from_order_number); //set order number
				to_order_enterprise.text(from_order_enterprise); //set enterprise
				to_dept_code.text(from_dept_code); //set dept code
				
				//hide all containers
				$( '#datepicker-container' ).hide(); //hide datepicker-container
				$( '#delay-container' ).hide(); //hide delay-container
				$( '#finish-container' ).hide(); //hide finish-container
				
				//open dialog box
				$('#change_order_status_dialog').dialog('open');
			});

 

[mongoose00318]

Okay...I was on the right track. I thought it had to do with my event binding. I fixed it like so...

$('body').on('click', '.btn_change_order_status_dialog', function() {
			//get data from button
			var from_order_id 			= $(this).data('order-id'); //get order id
			var from_order_number 		= $(this).data('order-number'); //get order number
			var from_order_enterprise	= $(this).data('order-enterprise'); //get enterprise
			var from_dept_code			= $(this).data('dept-code'); //get dept code

			//dialog box data containers
			var to_order_id 			= $('h5 span#order_id'); //get order id
			var to_order_number 		= $('h5 span#order_number'); //get order number
			var to_order_enterprise		= $('h5 span#enterprise'); //get enterprise
			var to_dept_code			= $('h5 span#dept_code'); //get dept code

			//update values in dialog box before showing user
			to_order_id.text(from_order_id); //set order id
			to_order_number.text(from_order_number); //set order number
			to_order_enterprise.text(from_order_enterprise); //set enterprise
			to_dept_code.text(from_dept_code); //set dept code

			//hide all containers
			$( '#datepicker-container' ).hide(); //hide datepicker-container
			$( '#delay-container' ).hide(); //hide delay-container
			$( '#finish-container' ).hide(); //hide finish-container

			//open dialog box
			$('#change_order_status_dialog').dialog('open');
		});

If I were to reload the data in that table with ajax on an interval will my events become unbinden again? If so, how can I rebind them?