【jQuery/Ajax】Remove函数未定义报错排查求助

Hey，我来帮你搞定这个问题！你现在遇到的是动态添加元素绑定事件时的作用域和重复ID问题，咱们一步步拆解：

你的问题回顾 #

你尝试给AJAX返回后动态添加的图标绑定点击事件，调用Remove函数时浏览器报错「Remove is not defined」，虽然你写了这个函数但就是找不到，需求是把element.id传入函数并弹窗显示。你的代码如下：

$('#button').click(function() { 
    var item_name = $('#name').val(); 
    var item_cost = $('#cost').val(); 
    $.ajax({ 
        url: '<?php echo base_url('shop/items'); ?>', 
        data: '&item_name=' + item_name + '&item_cost=' + cost, 
        type: 'POST' 
    }).done(function(result) { 
        var obj = $.parseJSON(result); 
        $.each(obj, function(index, element) { 
            $('#table').append("<tr><td>" + (index + 1) + "</td><td><i onclick='Remove(" + element.id + ");' id='icon' class=\"icon-refresh\" title=\"click here\"></i></td></tr>"); 
            $('#icon').click(function() { 
                function Remove(item) { 
                    alert(item); 
                } 
            }); 
        }); 
    });

为啥会报错？ #

1. 函数被“藏”起来了：你把Remove函数定义在了$('#icon').click()的回调里面，这个函数只能在那个回调函数的小范围内用，而你用onclick='Remove(...)'这种内联方式调用时，浏览器会去全局作用域找这个函数，自然找不到，所以报错。
2. 重复ID坑人：循环里每个图标都用id='icon'，ID是页面唯一的，后面的$('#icon')只能选中第一个图标，其他的绑定全失效。
3. 双重绑定冗余：你既写了内联onclick，又用jQuery绑定click，逻辑混乱还没用。

两种靠谱的解决办法 #

办法一：把函数放到全局，修正内联调用

把Remove函数拿到全局作用域，同时去掉重复ID：

// 把函数放到全局，内联onclick就能找到了
function Remove(item) {
    alert(item);
}

$('#button').click(function() { 
    var item_name = $('#name').val(); 
    var item_cost = $('#cost').val(); 
    $.ajax({ 
        url: '<?php echo base_url('shop/items'); ?>', 
        // 这里你之前写的cost是笔误，应该是item_cost
        data: '&item_name=' + item_name + '&item_cost=' + item_cost, 
        type: 'POST' 
    }).done(function(result) { 
        var obj = $.parseJSON(result); 
        $.each(obj, function(index, element) { 
            // 去掉重复id，用class标识；如果id是字符串要加引号哦
            var idParam = typeof element.id === 'string' ? `"${element.id}"` : element.id;
            $('#table').append(`<tr><td>${index + 1}</td><td><i onclick='Remove(${idParam});' class="icon-refresh" title="click here"></i></td></tr>`); 
        }); 
    });

办法二：用jQuery事件委托（强烈推荐！）

事件委托是处理动态元素事件的最佳方案，不用在循环里逐个绑定，一次绑定终身有效：

$('#button').click(function() { 
    var item_name = $('#name').val(); 
    var item_cost = $('#cost').val(); 
    $.ajax({ 
        url: '<?php echo base_url('shop/items'); ?>', 
        data: '&item_name=' + item_name + '&item_cost=' + item_cost, 
        type: 'POST' 
    }).done(function(result) { 
        var obj = $.parseJSON(result); 
        $.each(obj, function(index, element) { 
            // 用自定义属性data-item-id存储id，去掉内联事件和重复id
            $('#table').append(`<tr><td>${index + 1}</td><td><i data-item-id="${element.id}" class="icon-refresh" title="click here"></i></td></tr>`); 
        }); 
    });
});

// 给父元素#table绑定事件，监听所有.icon-refresh的点击
$('#table').on('click', '.icon-refresh', function() {
    var itemId = $(this).data('item-id'); // 取出存储的id
    alert(itemId);
});

额外小提醒 #

• 你代码里有个笔误：data里的&item_cost=' + cost应该是item_cost，不然会报cost is not defined的错误。
• 动态添加元素时，绝对不要用重复ID，用class来区分同类元素就好。
• 事件委托不仅代码更简洁，性能也更好，因为只绑定一次事件，不管后续加多少元素都能触发。

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