jQWidgets Forums
jQuery UI Widgets › Forums › Editors › Button, RepeatButton, ToggleButton, LinkButton › button wrapped in a DIV can be clicked even if disabled
This topic contains 4 replies, has 2 voices, and was last updated by Dan Fad 12 years, 2 months ago.
-
Author
-
Hi,
button wrapped in a DIV can be clicked even if disabled. Is there a way to suppress the click event?
here is a sample code with Div Button vs Input button
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <link type="text/css" rel="Stylesheet" href="../jqwidgets/styles/jqx.base.css" /> <script type="text/javascript" src="../scripts/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../scripts/gettheme.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme=getTheme(); $("#divButton").jqxButton({ theme: theme, width: 120, height: 20, disabled:true }); $("#inputButton").jqxButton({ theme: theme, width: 120, height: 25, disabled:true }); $("#divButton").click(function (event) { $("#inputButton").jqxButton({disabled:false }); }); $("#inputButton").click(function (event) { $("#divButton").jqxButton({disabled:false }); }); }); </script></head><body> <div id="divButton" style="float: left; margin-left: 5px;"><span style="margin-left: 4px;">Div Button</span></div> <input type="button" id="inputButton" value="Input Button" /> </body></html>
thanks,
dan fadHello dan fad,
The issue comes from the span element inside the div from which the jqxButton is created. If you only have:
<div id="divButton" style="float: left; margin-left: 5px;"> Div Button</div>
there should be no issues with the button.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/hi Dimitar,
i tried to remove the span element but the Click event is still invoked.
thanks,
dan fadHi dan fad,
It seems the div-created button only works properly in Internet Explorer. Creating a button from a div element is not suggested. You should initialize a jqxButton from either button or input elements. The following code works correctly on all browsers:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <link type="text/css" rel="Stylesheet" href="../2.6/jqwidgets/styles/jqx.base.css" /> <script type="text/javascript" src="../scripts/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="../2.6/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../2.6/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../scripts/gettheme.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = getTheme(); $("#divButton").jqxButton({ theme: theme, width: 120, height: 20, disabled: true }); $("#inputButton").jqxButton({ theme: theme, width: 120, height: 25, disabled: true }); $("#divButton").click(function (event) { $("#inputButton").jqxButton({ disabled: false }); }); $("#inputButton").click(function (event) { $("#divButton").jqxButton({ disabled: false }); }); }); </script></head><body> <button id="divButton" style="float: left; margin-left: 5px;"> Div Button</button> <input type="button" id="inputButton" value="Input Button" /></body></html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/hi Dimitar,
this solves the problem particularly buttons with image.
thanks,
dan fad -
AuthorPosts
You must be logged in to reply to this topic.