JQuery와 - 사업부

Question

에서 페이지 새로 고침 후 모달 대화 상자에 문제가 예를 살펴 걸릴 :

이

example.jsp :

이

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#Button1').button().click(function() { 
     $("#mainContent").load("example_1.jsp"); 
    }); 
    }); 
</script> 

<input id="Button1" type="button" value="RELOAD" /> 
<div id="mainContent"></div> 

example_1.jsp :

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#a").button().click(function() { 
     $("#a_form").dialog("open"); 
    }); 

    $("#a_form").dialog({ 
     autoOpen: false, 
     height: 480, 
     width: 625, 
     modal: true 
    }); 
    }); 
</script> 

<input id="a" type="button" value="MODAL" /> 
<div id="a_form" title="Modal Dialog" class="ui-widget"> 
    Hello! 
</div> 

내가로드 예를 .jsp와 나는 "RELOAD"버튼을 누른다. 그런 다음 "mainContent"에서 모달 대화 상자를 여는 "MODAL"버튼이 나타납니다.

그러나 다시 "RELOAD"버튼을 누른 다음 "MODAL"을 누르면 MODAL DIALOG가 더 이상 나타나지 않습니다! 왜? 어디에서 잘못 했습니까?

Answer 1

의 이유는

<input id="a" type="button" value="MODAL" />

신분증을 사용하고 있습니다.

로드를 다시 실행하면 허용되지 않는 id=a을 가진 다른 입력이 생성됩니다.

는 ID

Answer 2

example_1의 스크립트 블록이 페이지에 동적으로로드되기 때문에 문제가 발생한 것일 수 있습니다.

그래서 당신이해야 할 일을 example.jsp와 '# A'에 대한) (.live 사용하는 스크립트 블록을 이동하는 대신입니다 .click()

$("#a").button().live("click", function() { 
    $("#a_form").dialog("open"); 
}); 

Answer 3

당신은로드하기 전에/주요 내용이 다음 부하를 비우려고 다시 읽어 대신 클래스 식별자를 사용해보십시오.

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#Button1').button().click(function() { 
     $("#mainContent").html('').load("example_1.jsp"); 
    }); 
    }); 
</script>