jQuery中如何同时支持点击和回车触发函数并传递data属性参数

问题根因 #

你遇到的问题核心来自两个原因：

• 函数调用时this指向错误：你通过匿名回调包裹后直接调用handleClickAndEnter(e)时，函数内部的this默认指向全局window对象，而非触发事件的元素，自然无法读取元素上的id和data属性。
• 回车事件绑定对象不匹配：回车事件是绑定在输入框元素上的，输入框本身没有你存储在按钮上的pst/cst/pidd等自定义数据，也不符合你代码里xxxbutton的id命名规则，就算this指向输入框也无法拿到所需参数。

修复方案 #

这里给出两种可直接落地的修复方式：

方式1：修改this绑定（改动最小） #

调整事件绑定逻辑，保证handleClickAndEnter执行时this始终指向按钮元素：

// 点击事件直接传入函数作为回调，this会自动绑定为触发点击的按钮
$('.feed_reply_smiley').on('click', handleClickAndEnter);

$('.fi1').keypress(function(e) {
    if (e.which == 13) {
        e.preventDefault();
        // 按你的命名规则，通过输入框id拼接出对应按钮的id
        const targetBtnId = $(this).attr('id') + 'button';
        const $targetBtn = $('#' + targetBtnId);
        // 用call方法绑定this为按钮元素，传入事件对象
        handleClickAndEnter.call($targetBtn[0], e);
    }
});

// 原有函数逻辑不需要改动
function handleClickAndEnter(e) {
    var txt_id = $(this).attr('id').replace('button', 'txt');
    var vals = $('#'+txt_id).val();
    var pst=$(this).data('pst');
    var cst=$(this).data('cst');
    var pidd=$(this).data('pidd');
    // 后续ajax逻辑不变
}

方式2：显式传参（可读性更强，避免this指向问题） #

修改函数逻辑，不依赖隐式的this传递参数，直接把需要的按钮元素作为参数传入：

// 点击事件传入当前按钮元素
$('.feed_reply_smiley').on('click', function(e) {
    handleClickAndEnter($(this));
});

$('.fi1').keypress(function(e) {
    if (e.which == 13) {
        e.preventDefault();
        const targetBtnId = $(this).attr('id') + 'button';
        // 传入匹配到的对应按钮元素
        handleClickAndEnter($('#' + targetBtnId));
    }
});

// 函数修改为接收按钮元素作为参数
function handleClickAndEnter($btn) {
    var txt_id = $btn.attr('id').replace('button', 'txt');
    var vals = $('#'+txt_id).val();
    var pst = $btn.data('pst');
    var cst = $btn.data('cst');
    var pidd = $btn.data('pidd');
    // 后续ajax逻辑不变
}

内容的提问来源于stack exchange，提问作者Rajni kaundal