1

Below you will see the code I am working on and an included JSFiddle.

Issue:

  1. When I click the radio or checkbox the class gets added but the radio or checkbox is not selected.

Please explain the code so I can learn from this. If you do not have a solution any hints or direction would also be helpful. Thanks in advance!

http://jsfiddle.net/nLgqhqwc/6/

HTML

<div class="panel">
    <input type="text"/>
</div>

<div class="panel">
    <input type="text"/>
</div>

<div class="panel">
    <select>
        <option>option</option>
    </select>
</div>

<div class="panel">
    <input type="radio"/>
</div>

<div class="panel">
    <input type="checkbox"/>
</div>

CSS

.panel{
    padding:15px;
    background:grey;
    margin-bottom:15px;
}

.panel-primary{
    margin:0 15px 0 15px;
    background:blue;
    margin-bottom:15px;
}

jQuery

$(document).ready(function () {

$('.panel').click(function () {
    event.stopPropagation();
    $('.panel').removeClass('panel-primary');
    $(this).addClass('panel-primary');
});

$('input, select').bind('focus blur', function (event) {
    event.stopPropagation();
    $('.panel').removeClass('panel-primary');
    $(this).closest(".panel").addClass('panel-primary');
});

$('input[type=radio]').change(function () {
    event.stopPropagation();
    $('.panel').removeClass('panel-primary mrgn-lft-lg');
    $(this).closest(".panel").addClass('panel-primary');
});

});
isherwood
  • 58,414
  • 16
  • 114
  • 157
user262430
  • 229
  • 3
  • 17
  • The problem seems to come from moving the margin upon focusing or clicking. Try getting rid of the left margin in your CSS. http://jsfiddle.net/j08691/50s3a6eb/ – j08691 Dec 05 '14 at 15:37
  • i would expect the propagation to be not based on location but the hierarchy in the DOM ? Maybe the computation if an element has been hit does not use a cached position value... – Dennis Dec 05 '14 at 15:40

1 Answers1

4

Contrary to what virtually all the other answers are saying, the problem is not with your use of event.stopPropagation();. The sole issue is with the line $('input, select').bind('focus blur', function (event) {.

The problem is that the focus event is triggered prior to the click event, the class panel-primary is then being applied to the panel div and the left margin is moving it over to the right, and therefore the checkboxes or radio button don't receive the click event. An easy way to verify this is to either change the CSS so the left margin doesn't move, or remove the entire $('input, select').bind('focus blur', function (event) { block.

j08691
  • 204,283
  • 31
  • 260
  • 272
  • Sorry I did not saw actual problem my bad. Up vote for sure. Thank you for explanation. – Khamidulla Dec 05 '14 at 15:54
  • I confused stopPropagation with preventDefault. – Khamidulla Dec 05 '14 at 15:56
  • Isn't that what I said? Focus event adds a class, class has a margin, margin moves the div, click never hits the input. – j08691 Dec 05 '14 at 16:31
  • @j08691 Do you know of any ways to run a click/change before a focus? For example say something like "when a change/click happens remove ability to focus" or "when a change/click is possible run change/click before focus". – user262430 Dec 05 '14 at 17:07
  • Hmmm, not off the top of my head. At first I thought a timeout might do it but I think that would just introduce new issues. – j08691 Dec 05 '14 at 17:10
  • @j08691 Thanks for helping me identify the problem. If you happen to think of any solution I have posted a new question. http://stackoverflow.com/questions/27321859/focus-is-running-before-the-click-change-of-a-radio-button-is-it-possible-to-ru# – user262430 Dec 05 '14 at 17:55