点击后替换元素,然后在另一个地方点击返回

时间:2015-10-11 18:21:54

标签: javascript jquery html css

我试图在用户点击时将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不再使用它了。

所以我有两个问题:为什么没有停止传播()在这里工作,为什么div有"搜索"班级只换了一次?

1 个答案:

答案 0 :(得分:0)

使用正文作为点击的参考

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

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