jQWidgets Forums

Tagged: Button, click, disabled, div, jqxButtons, span

This topic contains 4 replies, has 2 voices, and was last updated by Dan Fad 12 years, 2 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

button wrapped in a DIV can be clicked even if disabled Posts

December 23, 2012 at 1:35 am button wrapped in a DIV can be clicked even if disabled #12752

Dan Fad

Participant

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 fad

December 27, 2012 at 8:55 am button wrapped in a DIV can be clicked even if disabled #12831

Dimitar

Participant

Hello 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,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

January 10, 2013 at 3:16 am button wrapped in a DIV can be clicked even if disabled #13402

Dan Fad

Participant

hi Dimitar,

i tried to remove the span element but the Click event is still invoked.

thanks,
dan fad

January 10, 2013 at 7:08 am button wrapped in a DIV can be clicked even if disabled #13410

Dimitar

Participant

Hi 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,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

January 10, 2013 at 8:26 am button wrapped in a DIV can be clicked even if disabled #13421

Dan Fad

Participant

hi Dimitar,

this solves the problem particularly buttons with image.

thanks,
dan fad

Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.