javascript - jquery 输入的输入的奇怪行为

Question

我有一个带有输入的表单，Jquery 生成一个特定的输入(url 输入)表单输入来链接，但我有两个 url 输入，HTML id 是 url0 和url1 并且当我想编辑第一个输入/url0 时，url1 的输入可见，并且更改是针对 url1 而不是 url0 进行的，当单击输入时，它会生成 url1 的值与 url0 相同，你可以明白我的意思 here - jsfiddle

非常感谢

具体步骤:

1. 带有输入的表单
2. 两个网址输入 url0/url1
3. onload 它们是链接，但在 HTML 中隐藏输入，单击激活输入，以便可以编辑
4. 当点击输入时，它会再次转换为链接

问题是这两个输入 (url0/url1) 会混淆并在编辑时产生奇怪的行为。请检查上面的链接查看

Answer 1

查看工作 jsFiddle here .

这是修改后的 JS，当您单击链接时，该 JS 就会起作用 -

$('.a0 a').click(function(e){
    e.preventDefault();
    $(this).parent().parent().find('input').val($(this).text()).show().focus();
    $(this).parent().hide();
})

$('#url0, #url1').each(
    function(index, element){
        $(element).blur(function(){
            $(this).hide().prev().show().find('a').html(this.value);
    })
    }    
);

当您单击链接所在的 div 时，以下操作有效 - jsFiddle

$('.a0').click(function(e){
    e.preventDefault();
    $(this).parent().find('input').val($(this).find('a').text()).show().focus();
    $(this).hide();
})

$('#url0, #url1').each(
    function(index, element){
        $(element).blur(function(){
            $(this).hide().prev().show().find('a').html(this.value);
    })
    }    
);

​