jQuery .replaceWith() 메서드가 클릭시 새로 고침

jQuery .replaceWith 메서드를 사용하여 사용자가 게시물에 답글을 달거나 게시물에 주석을 달 수 있습니다. 답장 버튼은 클릭 할 때 텍스트 상자를 만드는대로 작동합니다. 그러나 취소 버튼을 클릭하면 페이지를 새로 고침하지 않고 원래 게시물로 돌아가는 대신 페이지가 새로 고침됩니다. 취소 버튼이 제대로 작동하도록하려면 어떻게해야합니까? 도와 줘서 고마워!jQuery .replaceWith() 메서드가 클릭시 새로 고침

 <form method="post"> 
      <input type="hidden" name="post_id" value="{{ p.key.id() }}"> 
      <input type="hidden" name="user_id" value="{{ user.key.id() }}"> 
      <input type="button" name="reply" id="{{ p.key.id() }}" value="Reply"> 
     </form> 

     <script> 
      $("#{{ p.key.id() }}").click(function() { 

       var reply = $("<textarea name='reply_content' style='resize: none; width: 550px; height: 100px;'></textarea><br><input type='submit' name='reply' value='Reply'><input type='submit' id='cancel_{{ p.key.id() }}' value='Cancel'>") 

       $("#{{ p.key.id() }}").replaceWith(reply); 

      }); 

      $("#cancel_{{ p.key.id() }}").click(function() { 

       var cancel = $("<input type='button' name='reply' id='{{ p.key.id() }}'' value='Reply'>"); 

       $("#{{ p.key.id() }}").replaceWith(cancel); 

      }); 

     </script>

출처

2016-11-02 Young

이란 {{p.key.id()}} jQuery를 선택자에 대한? – calcazar

@calcazar Jinja2 템플릿을 사용하고 있으므로 서버 측 변수를 템플릿에 전달하고 있습니다. – Young

cancel_whateverid가 동적으로 추가되고 있으므로 추가 할 때 이벤트를 바인드하거나 심지어 위임을 사용해야합니다. 속는 사람에게 코드 샘플이 있습니다. ("받아 들여진"대답이 항상 최선은 아님을 참고하십시오) –

편집 : 이제 더 많은 정보를 얻었으므로 이전 답변을 업데이트하고 있습니다.

새 응답 :

내가 코드를 통해 보면서 몇 가지 일이 일어나고 있었다는 것을 깨달았다. 첫 번째는 객체에 이벤트를 묶은 다음 DOM에서 해당 객체를 제거 할 때 발생하는 위임 문제입니다.이 작업은 replaceWith에서 발생합니다. 여기 위임에 대한 자세한 내용을보실 수 있습니다 :

https://learn.jquery.com/events/event-delegation/

두 번째 문제는 당신이 당신의 버튼을 제출 만든 것입니다. 이 때문에 양식은 SS에 POST하려고 했으므로 새로 고침을 시도했습니다. 아래의 JS 바이올린에서; 단추로 변경했지만 제출이 필요한 경우 e.preventDefault를 사용하여 양식이 제출되지 않도록 할 수 있습니다.

세 번째 문제는 취소 버튼 클릭시 textarea 및 reply 버튼을 숨기려고 한 것입니다. 단추를 바꾸는 원인이 된 전체 양식 자체가 아니라 회신 단추를 교체 했으므로 텍스트 영역이 계속 유지되기 때문에 이것은 작동하지 않았습니다.

이제는 jsFiddle에서 더 깨끗한 방법을 사용할 수있을 것이라고 확신하지만 앞으로 무슨 일이 벌어 졌는지를 알기를 바랍니다.

내가 적용한 수정 프로그램은 취소 버튼을 원래 상태로 저장하고 버튼과 이벤트를 수정 한 다음 취소 버튼을 원래 상태로 다시 채우는 것으로 변경했습니다.

편집 2 : 새로운 피들을 첨부하는 것을 잊었습니다!

https://jsfiddle.net/6s03k0eb/5/

OLD 답변 :

그래서 일이 여기에가는 몇 가지가 있습니다. 우선은 아래 잘못된 HTML ID
<input type="button" name="reply" id="{{ p.key.id() }}" value="Reply"> 
ID를 숫자로 시작할 수 없습니다 가장 확실히 브래킷을 포함해서는 안됩니다. 이 ID가 서버에 의해 채워되고있는 경우, 당신은 확실히 적절한 ID가 아닌 서버 측 변수와 jQuery를 업데이트해야 :

잘못된
$("#{{ p.key.id() }}") 
올바른
$("#someID") 
페이지가 계속 새로 고침되는 이유는 유효하지 않은 jQuery 선택기로 인해 JS 오류가 발생하여 버튼이 기본 동작 인 t o 양식을 제출하십시오.여기

는 JS 바이올린 값은 적절한 작업 ID 코드를 도시한다 : https://jsfiddle.net/6s03k0eb/

출처

2016-11-02 15:30:50 calcazar

그 코드의 첫 번째 절반은 심지어 "유효하지 않은 jquery 선택기"와 함께 작동한다고 생각하면 클라이언트에 반환되기 전에 그것이 서버 측 구문 분석되는 템플릿 문자열이 아니라면 오히려 놀랄 것입니다 –

오른쪽 .. JS가 서버 측 변수를 참조하지 않아야합니다. DOM 객체를 참조해야합니다. – calcazar

맞아요. 그는

jQuery .replaceWith() 메서드가 클릭시 새로 고침

답변

관련 문제