Question

I have made a script, but it’s not working as expected, and I need help. You can see it here.

I need to implement the following behavior for the URL field only:

1. When you click on the link, the target page opens. This works.
2. When you click on the link’s parent div, the link becomes an editable input. This also happens, but my input field’s id is taken from an array, e.g. (url0, url1, url2), so when I have more than one URL in the form, only the first one works.
3. When you click outside after editing the input, it becomes a link again.
4. Also, when you double click on the link, it becomes editable.

Thanks in advance for all the answers, and I hope you can help me with this.

Answer 1

You can’t use the same id fоr different page elements – this is invalid markup, and, as you can clearly see, leads to invalid behavior. First things first, you might want to fix that in your markup.

If you can’t change that (but, once again, you really should!), you can use some more involved selectors, for example:

$('.cartRight > div > div > a').click(function(){
    $(this).parent().siblings("input").findval($(this).text()).show();
    $(this).hide();
})

Pretty silly, huh? You can probably use this mess as your last resort, though.

As for double clicking, I wouldn’t recommend implementing such behavior; it is uncommon in a Web context, and might be confusing to users. Also, from a technical standpoint, a single click already starts to load the new page; you could use window.stop() to stop that if the link is double clicked, but you’ll need to manually implement a double click event, since:

The dblclick event is rarely used. Even when you use it, you should be
sure never to register both an onclick and an ondblclick event handler
on the same HTML element. Finding out what the user has actually done
is nearly impossible if you register both.
(http://www.quirksmode.org/js/events_mouse.html#dblclick)

I think you should just have a small “edit” button to the right (maybe a “pencil” icon?), instead of going with your current UI scheme. It seems quite confusing to me – not to mention the users…