IE 8, jQuery 1.7.1 $(element).parents(selector) returns siblings also

Question

I have a form with this layout:

<div class='detail'>
    <div>
        <input type='button' class='save' />
    </div>
</div>
<div class='detail'>
    <div>
        <input type='button' class='save' />
    </div>
</div>
<div class='detail'>
    <div>
        <input type='button' class='save' />
    </div>
</div>

When $(".save").click() is triggered. I call $(this).parents(".detail")

For IE, this is what happens: - The parent <div class='detail'> is selected as well as the previous <div class='detail'> siblings.

For FF, this is what happens: - Only the parent <div class='detail'> is returned.

The correct functionality I'm looking for is what FF is doing.

May I know how to do a work-around for IE.

Thank you.

EDIT: This is the click event handler:

$(".product_details .button_save_draft").bind("click", function (event) {
    event.preventDefault();
    alert($(this).parents(".product_details").length);
});

try using `.closest('.detail')` instead of `.parents(".detail")` — Arun P Johny, Jul 04 '13 at 03:40
@ArunPJohny `.closest(".detail")` works for me. Thanks. I'm still wondering why `.parents(".detail")` does not work for IE. — Jantoy, Jul 04 '13 at 04:50
@zerkms I tried changing the jquery version to jquery 1.10.2 with jquery migrate 1.2.1 and it still functions the same way for IE. — Jantoy, Jul 04 '13 at 05:14
@Jantoy can you recheck your html markup to see how it is structured — Arun P Johny, Jul 04 '13 at 05:39
@ArunPJohny I checked and it's the way I mentioned above. Does it help if I mention that the other .detail divs are hidden? — Jantoy, Jul 04 '13 at 06:03
@Jantoy still it does not make any sense, if the markup is as you have described above it should be fine — Arun P Johny, Jul 04 '13 at 06:25
@Jantoy another question, is there any other parent with the class `detail`? — Arun P Johny, Jul 04 '13 at 06:25
@ArunPJohny I know, it's really odd. I can' test it in jsFiddle too because my development PC does not have access to the internet and my research PC uses IE 10. If change the compatibility view to IE8 and IE8 Standards mode, jsFiddle won't load properly. I checked and double-checked the mark-up, There is no other parent element with class `detail`. Anyway, I'll use `.closest()` for now. Thanks — Jantoy, Jul 04 '13 at 07:31

score 0 · Accepted Answer · edited May 23 '17 at 12:21

0

I don't have any idea why the above is working as described above, but as a solution probably you need to look at .closest()

$(".product_details .button_save_draft").bind("click", function (event) {
    event.preventDefault();
    alert($(this).closest(".product_details").length);
});

Also see the difference between them

edited May 23 '17 at 12:21

Community

1
1

answered Jul 04 '13 at 06:26

Arun P Johny

384,651
66
527
531

Thanks Arun! Now, I have to check all my code that used `.parents()` and see if they run smoothly if I change them to `.closest()`. Wish me luck – Jantoy Jul 04 '13 at 07:32

IE 8, jQuery 1.7.1 $(element).parents(selector) returns siblings also

1 Answers1