Question

我有一个p元素，当用户点击它时我想用输入元素替换它。页面加载期间可能不存在

，因此我使用委托来捕获click事件。

html（加载<p>后）

<div class="phrases">
    <div class="predefined-phrase>
        <p id="1">A predefined phrase"</p>
    </div>
</div>

我希望它像这样

<div class="phrases">
    <div class="predefined-phrase">
        <input type="text" id="1" class="form-control input-sm" value="A predefined phrase">
    </div>
</div>

我的js文件包含以下代码：

$(".phrases").on('click', ".predefined-phrase", function (event){
    event.preventDefault();
    var phrase = $(this).children().text();
    var id = $(this).children().attr('id');
    var input = '<input type="text" class="form-control input-sm" id="'+id+'" value="'+phrase+'">';
    $(this).children().remove();
    $(this).append(input);

});

<p>通常由输入替换，但我无法输入任何内容。如果在输入框上连续按下左键，我只能输入。我还想在新输入上捕获按键事件，以便编辑或删除特定短语。但我甚至无法输入输入框。为什么会这样？在点击事件回调中添加输入（并按原样应用）之后，我能正常捕获按键事件吗？关键是用户按下后，用ajax编辑短语，输入框消失，p用新编辑的短语加载或完全删除。

Answer 1

只需检查目标。如果是输入，则不执行任何操作：

$(".phrases").on('click', ".predefined-phrase", function (event){
    if($(event.target).is('input')) return;
    event.preventDefault();
    var phrase = $(this).children().text();
    var id = $(this).children().attr('id');
    var input = '<input type="text" class="form-control input-sm" id="'+id+'" value="'+phrase+'">';
    $(this).children().remove();
    $(this).append(input);

});

Answer 2

嗯，这是一个原生的JS解决方案，但希望它会指向正确的方向，或者如果你使用它而不是jQuery，那也是有效的。并非我已将您的ID更改为不以C-link提及的数字开头，因为这是不允许的。

document.getElementById("n1").addEventListener("click", function filler(){
    this.outerHTML = '<input type="text" id="' + this.id + '" class="form-control input-sm" value="' + this.innerHTML + '" />
    this.removeEventListener("click" filler)'
});

Answer 3

我建议接下来的改变：

<div class="predefined-phrase">
    <input type="text" data-id="1" class="form-control input-sm" value="A predefined phrase">
</div>

jQuery脚本：

$('.predefined-phrase').click(function() {
    var id = $('p', this).attr('data-id');
    var value = $('p', this).text();

    $('p', this).replaceWith('<input type="text" data-id="' + id + '" class="form-control input-sm" value="' + value + '" />')
});

Answer 4

$(function(){
    $('.predefined-phrase p').click(function() {
    var id = $(this).attr('id');
    var phrase = $(this).text();
    var newInput="<input type='text' id='"+id+"' value='"+phrase+"' />";
    $(this).replaceWith(newInput);
    });
});

DEMO FIDDLE

Answer 5

首先，不要从数字开始使用id。

对于您的解决方案，您可以使用replaceWith method，如下所示：

$('#your_id').replaceWith('<input type="text" id="your_id" class="form-control input-sm" value="A predefined phrase" />');

用输入元素</p>替换<p>元素

5 个答案: