Safari中的DOM遍历错误-Ember.js

Question

I have my template something like this,

<ul id="items">
    {{#each items as |item index|}}
       <li>
        <!-- <input type="checkbox" id={{concat "pf" index}} /> -->
        {{input type="checkbox" id=(concat "pf" index)}}
       </li>
    {{/each}}
</ul>

And I have my js something like this,

import Ember from "ember";

export default Ember.Controller.extend({
  appName: "Ember Twiddle",
  items: [{}],
  init: function() {
    $(document).on("click.somename", function (e) {
      alert($(e.target).parent().length); //should get parent as "li" and length as 1
    });
  }
});

What happening for my project is that, if I click on ember input helper I am not able to get the parentElement using jQuery . But when I changed that input helper to normal <input type="checkbox" /> , I am able to get the parentElement . I don't know whether Safari/Ember is using any virtual DOM or something to render its own helpers. This issue is happening only in Safari . In Chrome, it is working fine.

Unfortunately, I am not able to make a fiddle/plunker as the issue is not able to replicate in them. Sorry about that. In my project, I am using ember@2.7.3 .

Any suggestions/help on this issue?

Answer 1

While I'd recommend trying to find a way to avoid using the jQuery click event in the first place, it sounds like an issue with how the different browsers treat parent . I would prefer to use .closest('li').eq(0) to access the first parent that matches the element you are looking for.