jQuery - who really clicked me?

Question

I have this jsbin ( prev answers didn't help much)

<span id="mySpan" > click here </span>
  <br/> 
  <input id="myCb" type="checkbox"/>

enter image description here

i have a listener for checkbox click which do Alert...

However , clicking on the span is triggering the click event for the checkbox.

I want to detect - who really made the checkBox execute the alert.

But !

I want : if first clicked the span , alert i was originally pressed by mySpan

else

if first clicked the checkbox , alert i was originally pressed by myCb

$("#mySpan").on('click',function (e) 
  {
    $("#myCb").trigger('click');

  });

$("#myCb").on('click',function (e) 
  {
    doWork(e)
  });


function doWork(e)
{
  alert('i was originally pressed by '+$(e.delegateTarget).attr('id') );
 }

p.s. i can use a global field or flag solution - which i DONT WANT.

i will be glad to have a "moving the data" through the e param - solution.

thanks.:)

edit

jQuery does support moving data , but i cant write the right code

enter image description here

it's best you put the html here. if that link goes dead, the question won't be beneficial to future posters. — Joseph, May 21 '12 at 09:00
@RoyiNamir is there any chance you can tell us what are you trying to do in the first place, maybe there's a better way to accomplish all this, maybe you're seeing it from the wrong perspective... would be nice to help you with the correct way, and not only a simple answer, no? — balexandre, May 21 '12 at 09:06
@balexandre i can press span , i can press checkbox. the checkbox can doWork. somethimes i need the span to do the same work as checkbox click does. BUT inside doWork - i need to know that it came from the span and not from the pure checkbox. — Royi Namir, May 21 '12 at 09:09
@RoyiNamir, Do look at my code, I think, thats the one you want ;) — Jashwant, May 21 '12 at 09:18
@Jashwant i did. the +1 is from me. im waiting for more answers. but this is the closest to my question indeed :). — Royi Namir, May 21 '12 at 09:19

score 2 · Answer 1 · answered May 21 '12 at 09:15

This works for me,

<html>
<head>
<style>

</style>
<script src='jquery.js'></script>
<script type='text/javascript'>
    $(document).ready(function() {
        $("#mySpan").on('click',function (e){
            $("#myCb").trigger('click','span');
        });

        $("#myCb").on('click',function (e,span){
            var ele = span || 'cb'; 
            doWork(ele);
        });
        function doWork(ele){
          alert('i was originally pressed by ' + ele  );
         } 
    })


</script>
</head> 
<body>
  <span id="mySpan"   style="width:100px;height:100px;" > click here </span>
  <br/><br/><br/>
  <input id="myCb" type="checkbox"/>
</body>
</html>

Fiddle

mariomario · Accepted Answer · 2012-05-21T09:29:53.157

1

how about this.

$("#mySpan").on('click',function (e) 
  {

    $("#myCb").trigger(e);

  });

$("#myCb").on('click',function (e) 
  {
    doWork(e);
  });


function doWork(e)
{
  alert('i was originally pressed by '+$(e.target).attr('id') );
 }

It worked for me and it was the closest to your original code.

in action http://jsbin.com/ixanup/2/edit#javascript,html

edited May 21 '12 at 09:29

answered May 21 '12 at 09:24

mariomario

660
1
9
29

score 0 · Answer 3 · answered May 21 '12 at 09:02

0

$("#mySpan, #myCb").on('click', function (e) {
    alert('I was originally pressed by ' + e.target.id);
    console.log($(e.target)); /* jQuery reference to the clicked element */

    if (e.target.id === 'myCb') {
       /* do code only if checkbox was clicked */
    }
});

Example fiddle: http://jsfiddle.net/4AVZz/

answered May 21 '12 at 09:02

Fabrizio Calderan

120,726
26
164
177

i dont want the span to have functions code. i just want it to execute the code for checkbox. – Royi Namir May 21 '12 at 09:04
then just wrap inner function with `if (e.target.id === 'myCb')...` – Fabrizio Calderan May 21 '12 at 09:05

score 0 · Answer 4 · answered May 21 '12 at 09:26

maybe this code helpful for you:

  $("#mySpan").on('click',function (e) 
  {
    alert('i was originally pressed by '+$(e.delegateTarget).attr('id') );
    if($("#myCb").attr('checked')=="checked")
        $("#myCb").removeAttr('checked');
    else
        $("#myCb").attr('checked','checked');

  });

  $("#myCb").on('click',function (e) 
  {
    alert('i was originally pressed by '+$(e.delegateTarget).attr('id') );
  });

score 0 · Answer 5 · answered May 21 '12 at 09:51

$("#mySpan").on('click',function () {
        var cb = $("#myCb");
        if(cb.is(':checked')) {
            cb.removeAttr('checked');
        } else {
            cb.attr('checked', true);
        }
        doWork.apply($(this));
      });

    $("#myCb").on('click',function (e) {
        doWork.apply($(this));
    });
    function doWork(e) {
        console.log('i was originally pressed by '+$(this).attr('id') );
        alert('i was originally pressed by '+$(this).attr('id') );
    }

I've modified your example as per your requirement. And saved as a new version.

Please have a look at this. http://jsbin.com/axaqer/7/edit

score 0 · Answer 6 · answered May 21 '12 at 10:27

I would do something like this:

$(function() {

  $('.row span, .row input[type="checkbox"]')
    .on('click', function (evt) {

      triggerCheckbox($(this), evt.currentTarget.tagName);
      doWork(evt.currentTarget.tagName);
  });

});

function doWork(elm) {
  // elm with either be INPUT or SPAN
  console.log('I was originally pressed by ' + elm);
}

function triggerCheckbox(elm, evt) {  
  // if it's a SPAN, let's change the checkbox value without
  //  triggering the click event
  if(evt.currentTarget.tagName === 'SPAN') {
    var ckb = $(elm).closest('.row').find('input[type="checkbox"]');
    $(ckb).prop('checked', !$(ckb).prop('checked'));
  }
}

and it will not matter what ID you have, it will work with all, as long as you have a wrapper grouping the both.

in HTML, I added a <div> to wrap your content, so it will look like:

  <div class="row">

    <span id="mySpan">click here</span>
    <br/><br/><br/>
    <input id="myCb" type="checkbox"/>

  </div>

live example can be found on JsBin as well.

score -1 · Answer 7 · answered May 21 '12 at 09:03

-1

why dont you use,

e.currentTarget

?

answered May 21 '12 at 09:03

just_a_dude

2,745
2
26
30

i tried currentTarget but when i click on the span - it shows `i was originally pressed by myCb` – Royi Namir May 21 '12 at 09:05

jQuery - who really clicked me?

edit

7 Answers7