1

I built an Android app a while ago using jQuerymobile 1.3.2. The app created buttons by injecting hyperlink tags and calling .button() on them, then later on, once clicked, called remove() to drop them back out again. E.g:

<a class="jsButton" href="..." data-role="button" data-ajax="false">More...</a>

function doSearchMore(e) {
    e.preventDefault();
    jQuery(this).remove();

    ...
}

I'm now updating to jQuerymobile 1.4.2, and this code is no longer working. It seems .button() causes additional mark-up to wrap the hyperlink, so jQuery(this).remove() on the hyperlink then only removes the inner element, leaving the wrapping markup behind. It's possible that this was happening already but has now been emphasised by new styling.

Can somebody advise on how I should be removing the button upon click please?

Ric
  • 458
  • 1
  • 7
  • 23
  • 1
    http://stackoverflow.com/questions/22078664/jquery-mobile-custom-theme-buttons/22079455#22079455 and this http://stackoverflow.com/questions/22312810/json2htmled-jquery-mobile-button-inside-table-td-looks-old-has-old-button-insid/22313377#22313377 choose any of them. – Omar Mar 17 '14 at 22:00

1 Answers1

1

As of jQuery Mobile 1.4, <a> and <button> don't receive enhancement automatically. To convert them into buttons, you need to add class manually to them. jQuery Mobile has removed all span within buttons, which used to accommodate text and icon.

The .button() function should be used only on input with type button, submit and reset.

Anchor and button tags should be created manually as follows.

<a href="#" class="ui-btn ui-btn-a ui-btn-icon-right ui-icon-info" data-ajax="false">Information</a>
<button class="ui-btn ui-btn-b ui-btn-icon-left ui-icon-home">Home</button>

Now, you can inject those buttons dynamically without any enhacnement method, and you can call .remove() directly on clicked button.

References:

  1. Buttons
  2. Button Widget
Omar
  • 32,302
  • 9
  • 69
  • 112
  • This pretty much sums it up, thanks. I stumbled on to the 1.4 upgrade guide about 30 seconds ago and realised all I had to do was add the ui-btn class and data-enhanced="true" as an attribute :-). One question though - if we're not supposed to use .button() on hyperlinks any more, would jQuery('.ui-btn').click(function() {}) be the preferred bind these days? – Ric Mar 17 '14 at 22:11
  • @Ric you're welcome. binding events to `.ui-btn` without other selectors to make it specific, would get you into troubles. `.ui-btn` is used in many other widgets, so you need to be more specific when binding events to a _general_ class like `.ui-btn`. – Omar Mar 17 '14 at 22:12
  • Oh I didn't mean literally binding to that class, haha. I was referring to the use of .click() on the element directly as opposed to the original .button({ create: function(e, ui) { jQuery(this).bind(...); }}) calls... Actually I've just realised how utterly thick I'm being - I suppose the .bind() would work fine without being wrapped up in a create method. Silly me. – Ric Mar 17 '14 at 22:19
  • @Ric use `pagecreate` to bind events, use `.on()`. e.g. `$(document).on("pagecreate", "#pageID", function () { $(".ui-btn").on("click", function () { $(this).remove() }); });` – Omar Mar 17 '14 at 22:21
  • 1
    These buttons are added in after initial page creation, but just calling .bind() on them directly works a treat. It seems jQuerymobile 1.4 is actually much more like how I expected it to be when I first started dabbling, having been used to the regular jQuery ways :-). – Ric Mar 17 '14 at 22:42