제출 단추는 예제에서 두 번 누르면 작동합니까?

Question

이 바이올린 제발 봐 :

http://jsfiddle.net/uNbYu/1/

을 버튼을 한 번 누르면 제출하면, 그것은 뚜렷한 이유없이 텍스트 편집을 제거하지만 아무것도하지 않지만, 두 번째는,이 작업을 수행 누르면 페이지로 이동합니다.

이 코드를 작성하는 데 도움을주십시오. 코드의 말씀

$('b.edit').click(function() { 
    $(this).hide().after('<form action = "foo.php" method = post><input hidden name = "field" type = "text" value = "' + this.id + '"/><input type="text" name = "period" class="editP" value="' + $(this).html() + '" /><input type = "submit" value = "Submit!!" /></form>'); 
    $('.editP').focus(); 
}); 
$('.editP').live('blur', function() { 
    $(this).hide().prev('b.edit').html($(this).val()).show(); 
}); 

Answer 1

문제는 편집 상자는 당신이 버튼을 누르면되지 않도록하여 위치를 변경 버튼을 클릭하여 관리하기 전에 포커스를 잃을 것입니다.

Answer 2

이는 다음과 같습니다 :

감사

---

HTML :

<b class = "edit" id = "fooo"> FOO </b> 

JS 텍스

1. 버튼을 클릭하고 새 입력 요소를 만들고 버튼과 양식을 제출합니다. 흐림
2. 는 입력 요소 (안 제출 버튼을) 숨길

그래서 당신은 실제로 흐림 이벤트를 트리거하고 입력을 숨기고 처음 제출을 클릭하면.

또한 .prev을 사용하기 때문에 이전 텍스트는 다시 표시되지 않습니다. 이전에 인접한 형제를 선택하지만 입력 요소가 형식이므로 다른 요소는 형제가 아닙니다.

이 피들은 잘못 된 것이 더 분명하도록해야합니다. 초기 경고가 텍스트 FOO를 검색하는 방법에 유의하십시오. 또한 제출 버튼을 클릭하십시오.

http://jsfiddle.net/uNbYu/8/

Answer 3

1) 텍스트를 클릭하면 코드가 양식을 만들고 .editP에 초점을 맞 춥니 다.

$('.editP').focus(); 

2) 코드의 나머지 부분은 (흐림) 포커스를 잃으면 .editP을 숨길 말한다.

$('.editP').live('blur', function(){ 
    $(this).hide().prev('b.edit').html($(this).val()).show(); 
}); 

3) 그래서 버튼을 클릭을 시도 의 행위는 editP에 트리거 할 흐림 이벤트가 발생합니다. 이렇게하면 .editP이 숨겨져있어 클릭하지 못하도록합니다. 매우 빠르게 진행됩니다 ... 실제로 버튼을 성공적으로 클릭 할 수 있습니다.