I have created buttons before, but not using the same methods - this one
is causing me some grief. Basically, I am dynamically adding a button
based on a select from an autocomplete. I was not getting what I wanted
so I removed autocomplete out of the equation and worked on a simple
pretense of creating a single button as described in the API example
page
http://api.jqueryui.com/button/#entry-examples
guide - but I get different results than those described there.
My code:
-
$("#ProductMain").after("<button class='Top Button
ProductData Multiple' id='aaa' type='button'>button label<button>");
- $("button").button();
Using Firefox 32 the above code gives me two jQueryUI buttons - both
are same height/width and colour, the first one has text "button
label". The second one is blank. HTML generated code:
-
<button role="button" class="Top Button ProductData Multiple
ui-button ui-widget ui-state-default ui-corner-all
ui-button-text-only" id="aaa" type="button">
- <span class="ui-button-text">
button label
</span>
-
</button>
-
<button role="button" class="ui-button ui-widget ui-state-default
ui-corner-all ui-button-text-only">
-
<span class="ui-button-text">
</span>
-
</button>
Info on what I have done to help myself:
I have tested to see if my function is being called twice by inserting
an "alert(1);" - and the alert displays only once.
I can confirm that I have only one "#ProductMain".
I changed the last line of my code to $("#aaa").button() and it still
creates two buttons, except the first one has the jqueryui css layout,
and the second one is the gray ugly html standard button (similar height,
no text label).
Any ideas? (Thanks for reading the post)
( jQuery v2.1.1 and jQuery UI - v1.11.0)