使用jquery输入的输入的奇怪行为

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

The strange behavour is related to how you are handling your events

for example

$('#url0,#url1').val($(this).text()).show().focus();

Will open both inputs on a single click on either link.

you need to have reference between your input and link and maintain it or change it dynamically from link to input and back.

ps didn't think i would be seeing the exact same code a few days later :P

Answer 2

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);
    })
    }    
);

​