jquery mobile cannot hide submit button
I am using the latest version of jquery mobile and my problem is t开发者_如何学Chat I have given a submit button an ID and then added some css to set the ID to display:none;
For some reason this does not work.
Has anyone had this problem before?
It's hard to tell what you're trying to do without any code but I think the problem stems from the fact that jQuery Mobile doesn't style your existing button but rather, hides the element and wraps it in a new div
which is styled to look and behave like a button.
The current jQuery Mobile markup for a button looks like this:
<div data-theme="e" class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow ui-btn-hover-e ui-btn-down-e" aria-disabled="false">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Submit</span>
</span>
<input type="submit" id="submit_btn" value="Submit" data-theme="e" data-inline="true" class="ui-btn-hidden" aria-disabled="false">
</div>
So you look for the closest ancestor with the class ui-btn
and hide it:
$('#submit_btn').closest('.ui-btn').hide();
If there's a better way to do this, I'd love to know about it. Here's a fiddle that shows my solution in action.
I always use:
$("#<button-id>").parent().hide();
It seems to work fine as the button or input element will always be a child of the 'wrapper' div.
I've had issues with the above answers in cases i needed to toggle between the states.
I found it easiest to wrap your initial button in a div and then just hide/show it.
Meaning :
<div id="someid">
<input type="button" class="submit_button" id="resend_invoice" value="Button"/>
</div>
And then simply addressing the containing div would work as usual, as all the jQuery mobile divs and classes are created inside the containing div.
If you add data-role="none"
to your input element, then jQuery mobile will not draw the extra button.
精彩评论