2017-01-07 1 views
1

시작시 숨겨진 html 파일에 경고가 표시됩니다. 아래 코드를 참조하십시오. 첫 번째 Ajax 요청시 취소시 두 번째 ajax 요청시 부트 스트랩 경고 표시가 표시되지 않습니다.

<div class="alert alert-dismissible" role="alert" id="msgdiv" style="margin-bottom:5px;display: none;"> 
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
    <span id="emsg"></span> 
</div> 

는 지금은 우선이 사업부에 성공 또는 오류 클래스를 추가 한 후 지금까지 숨겨진 된이 사업부를 보여, 응답에 양식을 제출하고 기반으로하는 Ajax 요청을 보냅니다.

console.log($("#msgdiv")); 
$("#msgdiv").show(); 
if (result.is_success) { 
    $("#msgdiv").removeClass("alert-warning"); 
    $("#msgdiv").addClass("alert-success"); 

} else { 
    $("#msgdiv").removeClass("alert-success"); 
    $("#msgdiv").addClass("alert-warning"); 
} 
$("#emsg").html(result.message); 

이제 응답이 반환되면이 div가 표시됩니다. 크로스 버튼을 클릭하여 div를 취소합니다.
페이지를 새로 고치지 않고 Ajax를 사용하여 새 값으로 양식을 제출하고이 div가 표시되지 않습니다. 두 경우 모두 동일한 결과가 반환되었습니다. JS 코드의 두 시나리오에서 div 요소를 인쇄 한 결과가 아래에 나와 있습니다.

처음 :

[div#msgdiv.alert.alert-dismissible, context: document, selector: "#msgdiv"] 

두 번째 시간 아래 이미지

n.fn.init {context: document, selector: "#msgdiv"} 

자세한 내용은.

enter image description here

왜 이런 일이 무엇입니까? 콘솔 로그에 차이점이있는 이유는 무엇입니까? HTML 및 JS 관점에서 그 의미는 무엇입니까?

+0

안녕하세요. 예제로 보여준 첫 번째 JS 코드는 새로운 Ajax 응답 후에 항상 호출되는 함수 또는 다른 함수에 속한다. 우린 사건을 재현하기 위해 피들 또는 실행 가능한 코드를 만들 수 있습니다. –

답변

1

경고가 닫히면 DOM에서 제거됩니다. 누를 때 경고를 숨길 간단하게하기 위해 결합,

<div class="alert alert-dismissible" role="alert" id="msgdiv" style="margin-bottom:5px;display: none;"> 
    <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
    <span id="emsg"></span> 
</div> 

를 다음 닫기 버튼을 : 나중에 다시에게 경고하려는 경우

, 데이터 - 해고 닫기 버튼에 = "경고"를 다음과 같이 제거 :

$('.alert .close').click(function(){ 
    $(this).parent().hide(); 
}); 
+0

이 효과가 있습니다. 감사. – User42

관련 문제