Question

I have a form with inputs, the Jquery makes a specific input (the url input) form input to link, but i have for example two inputs of the url, the HTML ids are url0 and url1 and still when i want to edit the first input/url0 the inputs of the url1 is making visible and the changes are made for the url1 not url0 and when click out the input it makes the value of url1 same with the url0, you can see exactly what i mean here – jsfiddle

thanks a lot

exact steps:

1. Form with inputs
2. two url inputs url0/url1
3. onload they are links but with a hidden input in HTML on click activate the input so can be editable
4. when click out of the input it converts to links again

Problem is those two inputs (url0/url1) gets confused and make strange behavior on edit. please check the link above to see

Answer 1

See working jsFiddle here.

Here is the modified JS which works when you click on the link –

$('.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);
    })
    }    
);

The following works when you click on the div the link is in – 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);
    })
    }    
);

​