Search code examples
jquerycssdominternet-explorer-10

jQuery DOM tree navigation (.prevAll) to removeClass from sibling not working in IE 10


I have a form in which a div containing information is a sibling to a input field.

I want focus on a given input field to reveal its sibling only, so am using .prevAll and :first to select the correct div to remove the class "hidden" from. This works well in chrome (various), IE 11, and firefox (various) but not IE10 (which unfortunately is the most used browser for my users).

HTML:

<div class="container-module">
        <div class="text-module-number">1.1 </div>
        <div class="text-module-text">Total population</div>          
        <div class="prior-data hidden">
            <p>Data for 2013:</p>
            <span class="cpready">30,551,674</span>
            <div class="right-arrow"></div>
            <div class="useit">Use this data</div>
        </div>              
        <input class="capture-input" id="q_1233" type="" value="" name="1233" placeholder="Enter a number">
</div>

CSS

.hidden{
display: none;
width: 0;
height: 0;
}

 .prior-data {
  position: absolute;
  right: 328px;
  padding: 8px;
  top: 5px;
  z-index: 2;
  border: 2px solid #1892c1;
  background-color: white;
}

jquery

$("input").focus(function(){
    $(".prior-data").addClass("hidden");
    $( event.target ).prevAll("div.prior-data:first").removeClass( "hidden" );
});

The initial addClass hidden is there so that previously revealed examples of this class of div are hidden on focus on a new field, and then the sibling of any given field gets it's sibling revealed. This way only one is revealed at a time

EDIT: additional info: the console in IE gives me no errors or warnings.

EDIT: testing the following

$("input").focus(function(){
    alert("focus detected");
    $(".prior-data").addClass("test");
    $( event.target ).prevAll("div.prior-data:first").removeClass( "hidden" );
});

successfully alerts on field focus as expected, and succeeds in adding the test class. So it's the DOM navigation that's failing.


Solution

  • I found the issue.

    It is necessary to define the event in the arguments of the function. I am not sure why this is the case in IE10 but not any others, but it has resolved the issue.

    Working code reads:

    $("input").focus(function(event){
      $(".prior-data").addClass("hidden");
      $( event.target ).prevAll("div.prior-data:first").removeClass( "hidden" );
    });