jQuery 양식이 Firefox에서 작동하지 않습니다.

Question

나는 이것에 관한 모든 질문을 살펴본 결과 해결책을 찾을 수 없습니다. 나는 AJAX 호출을 통해 DOM에 추가되는 양식을 가지고 있으며, 성공적으로 완료되면 javascript 메소드에 양식 제출물을 연결한다. Chrome에서 잘 작동합니다. 파이어 폭스 (20) 내 자바 스크립트 메소드를 호출하거나 장고에 의해 렌더링 (21)

$("#dateList").load("/chargeback/cb_timeentry/te_list/" + empId, function() { 
     $("#addEntryDate").submit(function() { 
      addEntryDate(); 
      return false; 
     }); 
    }); 

양식, (FF와 크롬 모두에서) 다음과 같습니다하지 않습니다

<div id="addOrDelete"> 
    <input id="addEntryDateButton" type="submit" value="+"> 
    <input id="deleteEntryDateButton" type="submit" disabled="true" value="-"> 
    <table> 
     <tbody> 
      <tr> 
       <form id="addEntryDate" class="uiText" method="get" action="."></form> 
       <form id="deleteEntryDateForm" class="uiText" method="get" action="."></form> 
      </tr> 
     </tbody> 
    </table> 
</div> 

양식을 작성으로 장고 템플릿이 같다 :

<div id="addOrDelete"> 
<table> 
    <tr> 
     <form id="addEntryDate" class="uiText" action="." method="get"> 
      <input id="addEntryDateButton" type="submit" value="+" disabled="true" /> 
     </form> 
     <form id="deleteEntryDateForm" class="uiText" action="." method="get"> 
      <input id="deleteEntryDateButton" type="submit" value="-" disabled="true"/> 
     </form> 
     </tr> 
</table> 
</div> 

부하 호출 내 버튼 유형을 보여주는 올바른 HTML로, 파이어 폭스에서 잘 작동 = addEntryDate 양식 내부에 제출합니다. 로드가 제출 라인에 도달하면 addEntryDate는 DOM에 있지만 클릭 할 때 addEntryDate() 자바 스크립트 메소드가 호출되지 않습니다. 나는 무엇을해야합니까?

Answer 1

장고를 모르지만 렌더링 된 코드를 처음 보았을 때는 결코 작동하지 않아야한다고 생각합니다.

input submit은 기본 (브라우저 지원) 양식 제출을 제공하기 위해 form 요소 내에 있어야합니다. 하지만 어쨌든 작동한다면 Django는 mouseclick 자바 스크립트 이벤트를 올바른 폼 서브 브리 지션에 연결하는 자바 스크립트 코드를 추가 할 것입니다.

장고 템플릿에 의해 렌더링 된 양식이 작동하고 (AJAX를 통해) 만든 양식이 올바르게 작동하지 않기 때문에 가능합니다.

일부 jQuery/plain Javascript/etc가 있으면 redendered 페이지에서 검색하십시오. 귀하의 양식 subbmition에 대한 resposible 수 있으며 귀하의 AJAX 기반 양식에 복제하려고 코드입니다.

이것이 없으면 첫 번째 양식을 제출하지 않아야하며 Chrome에서 작동하는 이유를 알 수 없습니다.

하지만 적어도 당신은이 작업을 수행하는 간단한 jQuery를 작성할 수 있습니다

$("#dateList").load("/chargeback/cb_timeentry/te_list/" + empId, function() { 
     $(document).on("click", "#addEntryDateButton", function(e) { 
      e.preventDefault(); 
      e.stopPropagation(); 
      $("#addEntryDate").submit(); 
     }); 

     $("#addEntryDate").submit(function() { 
      addEntryDate(); 
      return false; 
     }); 
    }); 

Answer 2

내 생각 엔 이미 페이지에 ID가 addEntryDate 인 요소가 있고 Firefox가 ID를 소유 한 것으로 인식하지만 Chrome이 우선 순위를 부여하기로 결정했습니다.

두 ID가 같은 요소를 생성하는 코드를 작성하지 말고 동적 DOM 조작을 고려하면 .load()을 사용하면 쉽게 실수 할 수 있습니다.