单击选定元素内部的生成字段时，如何防止jQuery .click函数运行？

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/