如何用jQuery将input输入值替换到p.para标签并覆盖旧值

安全阿岳

2026-9-23

解决方案

原代码存在的问题

选择器错误：目标元素是<p class="para">，原代码写的$('div.content div.para')选择不到对应元素
input值获取逻辑错误：原代码$('input',this)中的this指向的是Okay按钮，无法找到输入框元素
存在多余操作：点击Okay按钮时重复执行$userName.appendTo($contentDiv)属于无效逻辑
事件重复绑定风险：每次点击Action按钮都会重复给Okay、Cancel按钮绑定点击事件，多次点击后会触发多次执行

修改后的jQuery代码

jQuery(function($) {
    const $contentDiv = $('.content');
    // 事件委托绑定Action按钮点击事件，避免重复绑定
    $contentDiv.on('click', 'button:not(.bttn,.bttn_2)', function() {
        // 避免重复生成输入框
        if ($('#input').length) return;
        
        const $userName = $('<h3><input type="text" id="input" placeholder="Enter your name"></h3>');
        const $okay = $('<button class="bttn">Okay</button>');
        const $cancel = $('<button class="bttn_2">Cancel</button>');

        $userName.appendTo($contentDiv);
        $okay.appendTo($contentDiv);
        $cancel.appendTo($contentDiv);
    });

    // Cancel按钮事件委托
    $contentDiv.on('click', '.bttn_2', function() {
        $('#input').closest('h3').remove();
        $('.bttn, .bttn_2').remove();
    });

    // Okay按钮事件委托
    $contentDiv.on('click', '.bttn', function() {
        const inputVal = $('#input').val().trim();
        // 输入不为空时覆盖p.para的原有内容，可按需调整空值逻辑
        if (inputVal) {
            $('p.para').text(inputVal);
        }
        // 移除输入框和操作按钮
        $('#input').closest('h3').remove();
        $('.bttn, .bttn_2').remove();
    });
});