Response title
This is preview!
JQ Mobile event delegation works with 1.3.2, no longer works with 1.4
in jQuery Mobile
•
8 years ago
Here is a jsbin demo of the problem: with jqm 1.3.1, delegation works when a new button is created. With jqm 1.4.0, newly created buttons no longer fire delegated click events. Just toggle the libraries in the head of the html, to duplicate the issue.
More detail and code samples:
A separate table with one row is used to insert new rows (and records). I then clone the new row and insert it into the main table. I update the data- attribute for each button so I know which row of the database to delete based on that value.
The delete button click is bound using delegation, and with version 1.3.2 of JQM it works as intended: if I click on the delete button in the newly inserted row, it fires my delete function (i.e. the binding is automatically there on newly added buttons).
After I updated to JQM 1.4 the newly added button no longer triggers the event (which is opening a popup, basically). If I refresh the page, the button works fine.
Here is that code block, located inside script tags in the content div of the page (I tried pageshow as well):
$(document).on ( 'pageinit', function(event) {
$("#venueTable tbody").on('click', 'button', function() { // delegated event so that newly inserted rows still have events...
// let the user delete a venue from the system
var vid = $(this).data('idvenue'); // the id of the venue to delete
var thisRow = $(this).closest('tr'); // a reference to the row to remove from the table
// are you sure?
$('#venue_popupDialog').popup('open');
$('#venue_delete_confirm').on('click', function() {
deleteVenue(vid, thisRow);
});
function deleteVenue(vid, thisRow) {
// delete is confirmed, so remove the record.
// call the delete function on the server
jQuery.post('somepage.php', {'delete':'delete', 'vid': vid} , function(data) {
// fade out then remove the row containing this button
thisRow.find('td').fadeOut(1000, function() {thisRow.remove();});
});
}
});
************
... here's the code that massages the "add" button to make it a "delete" button in the newly inserted, cloned row:
// change the add button to a delete button in the new row
$( '#venueTable tbody>tr:last>td:last' )
.html("<button class='deleteButton' data-icon='delete' data-iconpos='notext' data-idvenue='"+vid+"' title='Delete this venue'></button>");
$( '#venueTable tbody>tr:last>td:last button' ).button().button('refresh');
*********
here's a sample of what one of the delete buttons looks like in my html before the page is rendered:
<td><button class='deleteButton' data-icon='delete' data-iconpos='notext' data-idvenue='75' title='Delete this venue'></button></td>
*************
So... did something change about event delegation binding in version 1.4? Or... what am I doing wrong?
I should add that I had to change the way I used the popup as a confirmation dialog also, since that, too, seemed to work differently between versions of JQM. With 1.3.2 code execution pauses while waiting for a user to click to dismiss the popup. In 1.4 the code continues to run, so I had to find a different way to get the user's confirmation.... but I can't see any reason that would change the delegation issue...
I use id attributes, but I namespace them with the page name, so that shouldn't be an issue. And, the events fire correctly using version 1.3.2. But I want to use 1.4 so I can make the table sortable, filterable, and responsive (all of which works amazingly well).
Thanks in advance for any help,
Gene
1