0

I am in clojurescript using jQuery but the answer should be the same for cljs and js I think.

I have a helper function which creates creates an anchor element then puts an icon element inside of it. My anchor has a unique class for the type of button.

When I do something like

$('.my-btn-type').click(function(e) {console.log(e.target)});

  • prints if icon clicked (even though the handler is on the parent)
  • prints if only anchor is clicked

I constantly have an issue where the icon which is wrapped by the anchor is the event target and not the anchor with the handler attached to it. I am using data attributes in my anchor element which are needed in my handler function. This forces me to manually check if the event.target is the icon or the anchor and then manually bubble up the event or move forward.

This seems hackish and is a pain. There must be a simple way to attach a handler, in jQuery, js, or clojurescript, which would only call the element that the handler is bound to. How do I do this?

edit:

Using "this" was what I needed but in clojurescript the this-as macro is needed. This thread has an exampleenter link description here

Community
  • 1
  • 1
Jon Rose
  • 1,457
  • 1
  • 15
  • 25
  • 3
    `this` will always refer to the element that you bound the event to. – Kevin B Mar 20 '13 at 17:40
  • So the issue is, the event is fired when icon is clicked? – nuala Mar 20 '13 at 17:41
  • I didn't realize that was the case. That is good to know. Unfortunately, I haven't been able to access the "this" object from clojurescript. Maybe it warrants another thread if using "this" is the idiomatic way to do what I want. – Jon Rose Mar 20 '13 at 17:43
  • yes, clicking the inner icon element calls fires the event and the event.target is the icon not the parent anchor. – Jon Rose Mar 20 '13 at 17:44
  • Why do you care what the target is? Do you want different behavior for clicks on the icon vs. clicks elsewhere on the `` content? – Pointy Mar 20 '13 at 17:51
  • yes. I am using the anchor for an ajax request and needed information (element id) is stored in the data attributes of the anchor. see my comment below for more info. – Jon Rose Mar 20 '13 at 18:01
  • have you tried to use $(this).parent() inside the event scope? that should give access to the parent element – Rodrigo Dias Mar 20 '13 at 18:12
  • It turns our this IS a clojurescript specific thing which I sorted out by using the this-as macro. Link to thread in edit above – Jon Rose Mar 21 '13 at 17:45

1 Answers1

0

If I understood it right it seems like you are hooking up the click event for both the anchor and icon.

Or the anchor and the icon have the same class name.

e.g: 

<a href="#" class="my-btn-type" >
    <img src="../img/icon.png" class="my-btn-type" />
</a>
DanielDMO
  • 86
  • 1
  • 9
  • I just have "my-btn-type" on the anchor along with data attributes I need to have access to. When I click the icon, inside of the anchor, it still fires the event but obviously the results of functions like $(e.target).data("my-data") don't perform correctly since the icon doesn't have the data attributes that anchor does. I don't want to add all of the data attributes to both elements which I have done in the past. – Jon Rose Mar 20 '13 at 17:55
  • can you post some more code so I can have a look and have a better idea? – DanielDMO Mar 20 '13 at 18:03