Question

获取最近点击的按钮ID时的问题。用fontawesome图标装饰的表单提交按钮。

操作：

在正文click上获取按钮id
提交表格

概念

点击按钮上的鼠标指针正在运行

问题：

鼠标指针正好位于按钮图像上（示例：圆形箭头图标）单击   不工作。

浏览器控制台返回undefined

任何调整都可以使这个工作？通常，用户会被图像吸引，他们只会点击图标。怎么解决这个问题？

JSfiddle

Answer 1

请勿使用body，只能将其设置为buttons。

$(function() {
    $('button').on('click', function(e) {
       var buttonClicked = $(this).attr('id');
       console.log(buttonClicked);
    });
});

<强> Working example.

我不确定您是否想要在按钮点击上做更多工作。因此，您也可以在回调中手动submit表单。只需将按钮更改为type="button"而不是submit，然后再展开回调：

$(function() {
    $('button').on('click', function(e) {
       var buttonClicked = $(this).attr('id');
       console.log(buttonClicked);

       // do your work

       //  submit the form manually
       $("form").submit();
    });
});

<强> Working example.

Answer 2

如果你想要的只是点击按钮的ID，为什么要将事件附加到正文？我可以理解事件委托，但你这里只有两个按钮。将单击处理程序绑定到两个按钮。见http://jsfiddle.net/jvsxo8s0/4/

$(document).ready(function() {
  $('button').on('click', function(e) {
    target = $(e.target);
    buttonclicked = target.attr('id');
    console.log(buttonclicked);
    e.preventDefault();
  });
});

Answer 3

不知道为什么需要id，但是你可以使用jQuery中的submit()函数和表单数据serialize。

$(function() {
    $('#setpolicyform button').on('click', function(e) {
        e.preventDefault();
        
        // get button id
        var buttonId =  $(this).attr('id');
        
        // form data
        var formData = $('#setpolicyform').serialize();
        console.log(formData);
        
        // check the clicked id
        if(buttonId === 'save') {
            console.log('save');
        } else {
            console.log('send');
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <form role="form" method="POST" action="#" name="setpolicyform" id="setpolicyform">
    <div class='box-body pad'>
      <div class="form-group">
        <div class="lnbrd">
          <textarea class="textarea form-control" placeholder="Enter text ..." name="policyta" style="width: 510px; height: 200px;"></textarea>
        </div>
      </div>
    </div>
    <div class="box-footer clearfix">
      <button type="button" class="btn btn-danger pull-right" id="save"><i class="fa fa-save"></i>&nbsp;SAVE</button>
      <button class="btn btn-success" type="button" id="send"><i class="fa fa-arrow-circle-right fa-lg fa-fw"></i>Send</button>
    </div>
  </form>
</div>

Answer 4

使用此

$(document).ready(function() {
  $('body').on('click', function(e) {
    target = $(e.target);
    buttonclicked = target.closest("button").attr('id');
    console.log(buttonclicked);
  });
});

更新的小提琴在这里http://jsfiddle.net/jvsxo8s0/6/

单击获取按钮ID与fontawesome图标返回undefined

4 个答案: