DOM Traversing Error in Safari - 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?

the given code is just a sample and is only for mentioning the problem clearer. why i used jQuery event is actually i have created some dropdown like component, so when i click outside it should hide the dropdown. that's why added that `$(document).on("click", () => {})`. in `ember-twiddle`, i tried to reproduce, but everything seems to be working fine in it — Abraham Gnanasingh, Jun 13 '18 at 18:08
this seems weird, and I doubt its a ember problem. How is it of you use plain javascript instead of jQuery? maybe try some debugging. Can you reproduce in a new ember project and share a git(hub?) repo? — Lux, Jun 13 '18 at 18:24
Hey I forgot to mention that the issue happening only in Safari. Sorry about that. Edited this question. And I will try to reproduce something in `ember-twiddle` or `repo` — Abraham Gnanasingh, Jun 13 '18 at 18:28

score 0 · Answer 1 · answered Jun 14 '18 at 15:54

0

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.

answered Jun 14 '18 at 15:54

LocalPCGuy

6,006
2
32
28

I tried with `.closest('li').length` also before. That also not showing parent element and gives the length as 0. How to avoid using jQuery for this issue? By plain JavaScript you are saying? – Abraham Gnanasingh Jun 15 '18 at 03:56
By avoiding jQuery, I mean it'd be better to add an action to the element in the DOM that you are currently adding a click event listener to. Be declarative in your Handlebars templates about actions, and define those actions in your component JS files. Components (in general) shouldn't reach outside of themselves either, and jQuery makes it too easy to do that. – LocalPCGuy Jun 15 '18 at 17:19
If you need cross-component communication, you could look into using a service that is consumed by the components, and then bind computed properties in the components to properties in that service. Then the action could be in the proper component, triggering the service to update the service properties. – LocalPCGuy Jun 15 '18 at 17:19
Can you give a sample piece of code for this issue to understand you more? – Abraham Gnanasingh Jun 15 '18 at 17:47
1

Take a look at https://guides.emberjs.com/release/components/triggering-changes-with-actions/ (and maybe https://guides.emberjs.com/release/components/handling-events/ but I'm guessing the actions one might suit your needs) – LocalPCGuy Jun 17 '18 at 00:33
I checked the links and also with this [link](https://stackoverflow.com/a/32115231/4131978), but still no luck. This `.closest("li")` not working when using only Ember helpers (that too only in Safari) irritating like anything. Safari browser's DOM element (`li`) cannot be accessed from Ember's DOM (checkbox helper)? – Abraham Gnanasingh Jun 18 '18 at 14:56
if you switch to using Ember helpers you would then NOT be using DOM traversal at all. – LocalPCGuy Jun 18 '18 at 16:32

DOM Traversing Error in Safari - Ember.js

1 Answers1