두 번 제출할 때 Ajax가 작동하지 않습니다.

안녕하십니까, 읽어 주셔서 감사합니다!두 번 제출할 때 Ajax가 작동하지 않습니다.

것부터 먼저, 그래서 여기 내 설정이다 : -

jq('#p5-content').load('content/stuff.php');

stuff.php를 사용하여 div의에로드 콘텐츠 -

의 index.php 형태와의 스크립트를 포함하고 그 <head> 부분. 이 양식입니다

var jq = $.noConflict(); 
jq(function() { 

    jq('form').on('submit', function (e) { 

     e.preventDefault(); 

     var page = jq(this).attr("page"); 

     jq.ajax({ 
      type: jq(this).attr("method"), 
      url: jq(this).attr("action"), 
      data: jq(this).serialize(), 
      success: function (data) { 
       jq('#' + page + '-content').html(data); 
      } 
     }); 

    }); 

});

이

스크립트입니다

<form action="content/stuff.php" method="post" page="p5"> 
    <input type="hidden" name="p5-submit-1" /> 
    <input type="image" style="margin-top: 20px;" src="images/send.png" /> 
</form>

보내기 버튼을 클릭하면 내가 가끔 문제로 실행하고, 전체 페이지로 리디렉션됩니다 content/stuff.php 및 경우에 따라 div (p5-content) 내의 원하는 콘텐츠 만 양식에 응답합니다. p5-content의 내용 만 바꿔주세요.

또한 작동하고 다른 내용이 다른 (유사한) 형식을 포함하는 p5-content에로드되면이 두 번째 형식을 클릭하면 전체 페이지가 content/stuff.php으로 변경됩니다.

또한 <head> 부분에 index.php 인 경우 스크립트가 작동하지 않는지 궁금합니다.

요약 : 그것은 index.php에있는 경우

스크립트가 작동해야
때해야
내 아약스의 응답 영역 안에 두 번째 양식을 제출하면 응답이 div 내부에 다시 있어야합니다.

출처

2014-07-06 user3735411

p5-content 요소는 어디에 계층화되어 있습니까? <form>이 p5-content의 하위 요소 인 경우 제출 처리기를 할당 한 원래 양식은 새롭고 동일한 <form>으로 대체되며 여기에는 전송 처리기가 연결되지 않습니다. e.preventDefault();이 더 이상 호출되지 않기 때문에 전체 페이지를 게시하는 이유가 설명됩니다.

이 문제를 해결하려면 <form>을 아약스 전화로 바꾸지 않는 방법을 찾아야합니다. 어쨌든 모든 아약스 포스트 백과 함께 데이터를 적게 보내고 있기 때문에 더 좋습니다. 또는 <form> 전체를 바꿔야하는 경우 아약스 콜백의 끝 부분에 submit 이벤트 핸들러를 다시 추가하십시오.

<head>에서 스크립트가 작동하지 않는 이유는 jQuery가 포함되기 전에 스크립트가 실행 중이기 때문일 수 있습니다 (jQuery를 포함하고있는 위치가 확실하지 않음). HTML 파서는 스크립트가로드되기를 기다리는 동안 차단되므로, 어쨌든 <body>의 끝에 모든 스크립트를로드하여 콘텐츠로드 속도를 높이는 것이 좋습니다. this post에 설명 된대로 async 속성을 사용할 수도 있지만 이렇게해도 스크립트가 올바른 순서로로드되지 않을 수 있으므로 귀하의 경우에는 권장하지 않습니다.또는 로딩 시간을 최적화하고 작업을하고 싶다면 this article을보십시오.

출처

2014-07-07 01:36:06

@ aj-r 내 코드는 다음과 같습니다 : '

'이고 form1을 제출 한 후에는 '

'처럼 보입니다. 나는 지금 양식을 바꾸지 않으려 고 노력하고있다. 그리고 나는 다시보고 할 것이다. 또한, 나는 두 번 확인하고 jquery 확실히 스크립트 자체 전에 포함될 것이라고 확신했다. 내가 당신의 링크 된 기사를 읽을 것입니다 - 나는 그것에 대해 절대적으로 기뻐요, 감사합니다 :) – user3735411

@ aj-r 굉장히 많이 도와 줬어! 이제 div 주위에 '

@ aj-r 좋아요, 모든 것이 이제 예상대로 작동합니다! 스크립트의 일부를 비동기 적으로로드하고 양식도 훌륭하게 작동합니다. 고맙습니다! – user3735411

두 번 제출할 때 Ajax가 작동하지 않습니다.

답변

관련 문제