使用 fontawesome 图标获取按钮 ID returns undefined

Question

获取最近点击的按钮 ID 时出现问题。表单提交按钮装饰有精美的图标。

运算：

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

概念：

鼠标指针在按钮上点击有效

Issue:

Mouse pointer exactly over button image(example:round arrow icon) click not working.

浏览器控制台返回 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);
  });
});

更新 Fiddle 在这里 http://jsfiddle.net/jvsxo8s0/6/

使用 fontawesome 图标获取按钮 ID returns undefined

get button id on click with fontawesome icons returns undefined

html

javascript

jquery

button

font-awesome