javascript - 单击时替换元素，并在其他位置单击时将其返回

Question

我试图在用户点击它时将 div 转换为输入，并在用户点击另一个地方时向后转换。这是我设法做到的:

http://plnkr.co/edit/afywWZL0O6xLuE1IXDRN?p=preview

如果你点击带有放大镜图片的div，它会变成一个输入，但是有两件事需要修正。

第一个问题是你不能使用这个输入，因为一旦你点击它，它又变成了一个div。我将 stopPropagation() 添加到表单和输入中，希望它能防止不需要的替换，但它似乎不起作用。

$(".search-input").on("click", function(event){
    event.stopPropagation();
});

$(".search-form").on("click", function(event){
    event.stopPropagation();
});

第二个麻烦是，当你尝试测试它并点击放大镜，然后点击右边的空白区域时，你只能做一次。在我看来，当您创建一个带有“搜索”类的 div 并进行替换时，jQuery 不再适用于它。

所以我有两个问题:为什么 stopPropagation() 在这里不起作用，为什么带有“搜索”类的 div 只被替换一次？

Answer 1

使用正文作为点击的引用

$(body).on("click", ".search-input", function(event){
    event.stopPropagation();
});

$(body).on("click", ".search-form", function(event){
    event.stopPropagation();
});