通过jQuery Ajax第二次提交表单时出现undefined错误

嘿，我看了你的代码，发现几个关键问题导致第二次提交时出现undefined的情况，咱们一步步来解决：

问题出在哪？ #

• 重复绑定事件：你把save-data按钮的点击事件嵌套在showme按钮的点击回调里了！每次点击showme，都会给save-data多绑一次事件。第二次提交时，旧的事件会被触发，而旧事件里的uid已经不是当前弹窗的ID了，自然拿不到正确的textarea值，就出现undefined。
• 动态ID的坑：你每次弹窗都改.modal-body和textarea的ID，多次操作后DOM里可能会有重复ID，或者后续获取元素时匹配到错误的节点，导致值拿不到。
• 作用域覆盖：uid是在showme的回调里定义的，多次打开弹窗后，这个变量会被新的ID覆盖，旧的事件触发时用的是新的uid去找旧的textarea，结果自然是undefined。

修复后的完整代码 #

jQuery(function($){ 
    var site_url = '<?php echo site_url('front/submit_quote'); ?>'; 
    
    // 把save-data的事件移到外面，用事件委托避免重复绑定
    $(document).on('click', '.save-data', function (e) { 
        e.preventDefault();
        $('.modal').modal('hide'); 
        
        // 精准获取当前模态框里的textarea值和uid
        var $modal = $(this).closest('.modal');
        var msg = $modal.find('textarea').val();
        var uid = $modal.find('.modal-body').data('uid');
        
        // 先校验数据，避免提交空值或undefined
        if(!msg || !uid){
            console.log('请确认数据填写完整');
            return;
        }
        
        $.ajax({ 
            url: site_url, 
            type: 'POST', // 补全你原来没写完的type属性
            data: {
                uid: uid,
                message: msg
            },
            success: function(res){
                console.log('提交成功！', res);
                // 这里可以加提交成功后的逻辑，比如提示用户
            },
            error: function(xhr, err){
                console.log('提交失败了', err);
            }
        }); 
    }); 

    $('button.showme').click(function(ev){ 
        ev.preventDefault();
        var uid = $(this).data('id'); 
        
        // 不用改ID，把uid存在modal-body的data属性里更靠谱
        $('.modal-body').data('uid', uid); 
        // 给textarea赋值，ID如果不是必须的可以去掉，或者保留但不用每次改
        $('.modal-body textarea').val(uid).attr("id","taval"+uid); 
        
        $('.modal').modal('show'); // 你原来的代码里没写显示模态框，补上
    }); 
});

核心修复说明 #

• 事件委托：用$(document).on()绑定save-data的点击事件，不管模态框怎么切换，只会绑定一次，不会重复触发旧事件。
• 用data属性传值：把uid存在.modal-body的data-uid里，不用依赖容易出问题的动态ID，获取时直接从当前模态框里拿，精准又可靠。
• 精准选择器：通过closest('.modal')找到当前触发事件的模态框，再用find()找里面的textarea，完全不会搞错元素。
• 数据校验：提交前检查msg和uid，避免无效的Ajax请求。

这样改完之后，不管你多少次打开弹窗提交，都能正确获取到对应的数据，再也不会出现undefined的问题啦！

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