How to prevent jQuery .click function from running when clicking in generated field inside selected element?

Question

So I'm trying to do some inline text editing with jQuery and ajax. The code does the job but I ran into an issue regarding input field generation.

Here's the part of code generating input field:

$('.edit_area').click(function() {

    old_value = $(this).text();

    $('.ajax').html(old_value);
    $('.ajax').removeClass('ajax');


    $(this).addClass('ajax');
    $(this).html('<input id="editbox" type="text" size="'+$(this).text().length+'" value="'+old_value+'">');

    $('#editbox').focus();                              
});

It basically generates input field in the place of original text. Variable old_value stores original text and is used for default input value and to restore original text if user cancels editing. If user clicks on different element with class .edit_area the previous returns to original state and user can edit that other one. It's just what i need for my project.

Here is the problem: the function runs even if I click inside the generated input field. Is there any way to fix this?

Answer 1

Try to use jquery find to check whether the textbox exists or not.

 var isfound=$( ".edit_area" ).find( "#editbox" );
 if(isfound.length!=0) return;

http://jsfiddle.net/bochzchan/eURtZ/