jquery add row on click only if it's empty?

Question

The code below works, insomuch that if I click in an input field, it'll add another row. I'm trying to figure out though, how to do that only if the input field is empty?

$("#tableSearchData > tbody > tr > td > input").bind('focus', function(){
                var row = $(this).closest("tr").get(0);
                if( row.className.indexOf("clicked")==-1 )
                {
                    var rowCopy=$(row).clone(true);
                                $(row).closest("tbody").append(rowCopy);
                                row.className+=" clicked";
                }
});

Answer 1

$("#tableSearchData > tbody > tr > td > input").bind('focus', function(){
      if ($(this).val() == "")
      {
                var row = $(this).closest("tr").get(0);
                if( row.className.indexOf("clicked")==-1 )
                {
                    var rowCopy=$(row).clone(true);
                                $(row).closest("tbody").append(rowCopy);
                                row.className+=" clicked";
                }
      }
});

Answer 2

If you just want to make sure there are no characters in the text box you can check .val() for ""

if ($(this).val() === "")

If you want to make sure that characters inside the textbox are not white spaces then you can trim the val and check for empty

if ($.trim($(this).val()) === "")

If your classname is exactly "clicked" then you can use .hasClass() to check whether the class is present on an element or not.

if (row.hasClass("clicked"))