How Can I Deal With A Case In JQuery Where An Anchor's Text Value Is Changed To ""?

This is the code: Jsfiddle I have a form where the a text values can be edited by dblclicking on the link, or clicking inside the div the a is inside. Onblur, the value in the inp

Solution 1:

Just do this way, your problem will be sorted out.

On blur, just check the value length is zero then show the input field else show the hyperlink.

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

Refer this LIVE DEMO

Solution 2:

How about this mate?

http://jsfiddle.net/jaspermogg/EdtC2/4/

$('#url0, #url1').each(
    function(index, element){
        $(element).blur(function(){
        this.value == "" ? $(this).hide().prev().show().find('a').html("[insert text here]") : $(this).hide().prev().show().find('a').html(this.value);
    })
    }    
);

If the input box is empty, it sets the a to '[insert text here]'. Or do you want a situation where it's effectively invisible? If that's the case, you could always change the text colour to match the background, for example?

Solution 3:

Not a bug at all. Your a tag is empty, it collapses.

See this demo to see. You need to set some css on it to make it not collapse. For example, the border makes it work as expected. Adding a padding, or margin would work too. Making it display inline-block also fixes it without any extra border, padding, or margin.

.a0 a {
    display: inline-block;
}​

Solution 4:

try this.

I simply added a border,default width and height so that the div is visible / clickable even after the input is removed. You might not need to do that.