jquery .load가 사용될 때 jQuery 함수는 한 번만 작동합니다.

jquery .load() 함수를 사용하여 외부 .html 파일을 index.html 페이지로로드합니다. 여기 jquery .load가 사용될 때 jQuery 함수는 한 번만 작동합니다.

내 index.html을 수 있습니다 :

index.html을

<!doctype> 
<html> 
<head> 

    <title></title> 
    <meta name="viewport" content="width=device-width, initial-scale=1">  

</head> 

<body> 

    <div id="nav"></div> 





<script src="jquery/jquery.min.js"></script> 


<script> 


    $(function() { 

     $("#nav").load("nav.html"); 

    }); 



    function changeLayout(layout) { 

     if(layout == '4') { 

    $("[class^='col-md-']").removeClass (function (index, css) { 
     return (css.match (/(^|\s)col-md-\S+/g) || []).join(' '); 
    }).addClass("col-md-4"); 



} else 

     if(layout == '6') { 

    $("[class^='col-md-']").removeClass (function (index, css) { 
     return (css.match (/(^|\s)col-md-\S+/g) || []).join(' '); 
    }).addClass("col-md-6"); 



} 

else 

     if(layout == '12') { 

    $("[class^='col-md-']").removeClass (function (index, css) { 
     return (css.match (/(^|\s)col-md-\S+/g) || []).join(' '); 
    }).addClass("col-md-12"); 



} 

} 


</script> 




</div> 

</body> 
</html>

이있는 nav.html 파일 I로드있어 그 :

nav.html

<div id="subnav" class="container"> 
    <div class="row"> 
     <div class="btn-wrapper"> 
      <div class="layout"> 
       <button onclick="changeLayout('4');">Layout1</button> 
       <button onclick="changeLayout('6');">Layout1</button> 
       <button onclick="changeLayout('12');">Layout1</button> 
      </div> 
     </div> 
    </div> 
</div>

내 문제는 위의 changeLayout 함수는 '한 번만'작동하고 다시 작동하도록 전체 페이지를 다시로드해야합니다.

왜 이런 일이 발생하며 어떻게이 문제를 해결할 수 있습니까?

출처

2016-06-21 estevan gomez

버튼에 type="button"을 추가해야합니다. 현재 buttons은 submitting 인 것으로 보입니다.

또한 버튼에 href 속성이 필요하지 않습니다.

<button type="button" onclick="changeLayout('4');">Layout1</button> 
<button type="button" onclick="changeLayout('6');">Layout1</button> 
<button type="button" onclick="changeLayout('12');">Layout1</button>

이동하면 changelayout 기능 nav.html에

출처

2016-06-21 13:36:58 Mairaj

이 didn를 정렬하지 않았나요 ... –

@estevangomez는 오류가 있으면 콘솔을 점검 할 수 있습니까? – Mairaj

전혀 오류가 없습니다 :/ –

HTML 헤드 섹션에 스크립트를 배치해야합니다. 머리 부분 (제목 아래)에서 스크립트 태그를 모두 움직이면 괜찮을 것입니다.

신체의 내용을로드 된 html 파일로 바꿨을 것입니다. 따라서 모든 JavaScript가 사라졌습니다.

출처

2016-06-21 13:35:05 Eytibi

스크립트 태그는 문제 – tpdietz

그것을 시도하고 난 여전히 같은 문제가 작동하도록 헤더에있을 필요가 없습니다 문제를 해결할 수 없습니다 ... 여전히 동일한 문제가 발생 했습니까? –

jquery .load가 사용될 때 jQuery 함수는 한 번만 작동합니다.

답변

관련 문제