I created an example at http://jsbin.com/IFolanOW/90/edit using the recommended github template. I'm using the new selectmenu widget in jqm 1.4. The issue appears in firefox, chrome As you can see there are several selectmenu widgets on the page. Two (Instruments and Genres) are long enough that they trigger the behavior where the select menu opens as a dialog. They are styled: data-theme='b' data-overlay-theme='b'.... It appears when I inspect that dialog that the body of the dialog page has a class that causes the style of the overlay to always be "a". Setting the data-theme-overlay option on the selectmenu widget per the docs has no effect. What did I do wrong? How can I style the overlay?
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:
I have a table (#venueTable), the last column of which contains a button that allows users to delete the row (both from the table and from the underlying database via AJAX).
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
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).
I made some <ul>'s and made them sortable in the usual way. I gave them a common class and connected them so I could move items between the lists.
I wanted to put a label on the lists (e.g. list 1 , list 2, etc.)
I did that by typing text after the opening <ul> tag, and it worked fine.
Then I wanted to style the labels, so I put them in a <span> tag and gave the span a class so I could style them all the same.
That breaks the way the sortable objects work: a target only opens on the fist or last element, and you can't sort the list items anymore. The new placeholder <li> is only created at the top or bottom of the list.
Removing the <span> fixed the issue, but it would be nice to have a good way to label the lists, and style the label.
My workaround was to put the list in a div, set some css on the text of the div, and that passed through to the label I typed in the <ul>.
Took me quite a while to figure out that was the issue, so maybe this will save someone else some headaches.... Here's a demo of the problem. Note that you can't sort items in the list that contains a <span>