3

我有这个jsbin（上一个答案没有多大帮助）

 

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

在此处输入图像描述

我有一个checkbox点击监听器Alert...

但是，单击span会触发的click事件checkbox。

我想检测 - 谁真正让复选框执行警报。

但是！

我想要：如果第一次点击跨度，提醒 i was originally pressed by mySpan

别的

如果第一次点击复选框，警告 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') );
 }

ps 我可以使用全局字段或标志解决方案 - 我不想要。

我很高兴通过e参数解决方案“移动数据”。

谢谢。：）

编辑

jQuery 确实支持移动数据，但我无法编写正确的代码

在此处输入图像描述

4

7 回答 7

2

这对我有用，

<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>

小提琴

于 2012-05-21T09:15:01.547 回答
1

这个怎么样。

$("#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') );
 }

它对我有用，并且最接近您的原始代码。

在行动http://jsbin.com/ixanup/2/edit#javascript,html

于 2012-05-21T09:24:30.677 回答
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 */
    }
});

小提琴示例：http: //jsfiddle.net/4AVZz/

于 2012-05-21T09:02:04.797 回答
0

也许这段代码对你有帮助：

  $("#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') );
  });
于 2012-05-21T09:26:54.470 回答
0 
$("#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') );
    }

我已根据您的要求修改了您的示例。并保存为新版本。

请看看这个。http://jsbin.com/axaqer/7/edit

于 2012-05-21T09:51:31.763 回答
0

我会做这样的事情：

$(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'));
  }
}

你拥有什么并不重要ID，它可以与所有人一起使用，只要你有一个将两者分组的包装器。

在 HTML 中，我添加了一个<div>来包装你的内容，所以它看起来像：

  <div class="row">

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

  </div>

现场示例也可以在 JsBin上找到。

于 2012-05-21T10:27:21.153 回答
-1

你为什么不使用，

e.currentTarget

?

于 2012-05-21T09:03:35.387 回答