jQuery show()가 Chrome에서 작동하지 않습니다.

Question

jQuery 코드가 예상대로 작동하지 않습니다. 삭제 및 이동 : 두 개의 유사한 코드 블록이 있습니다

$(function() { 
    // delete file 
    $("a.delete_file_initial").click(function(event) { 
     event.preventDefault() 
     $(this).hide() 
     $(".delete_file_question").show() 
    }); 
    $("a.delete_file_question").click(function(event) { 
     if ($(this).hasClass("cancel")) { 
      event.preventDefault() 
      $(".delete_file_question").hide() 
      $(".delete_file_initial").show() 
     } 
    }); 

    // move file 
    $("a.move_file_initial").click(function(event) { 
     event.preventDefault() 
     $(this).hide() 
     $(".move_file_question").show() 
    }); 
    $("a.move_file_question").click(function(event) { 
     if ($(this).hasClass("cancel")) { 
      event.preventDefault() 
      $(".move_file_question").hide() 
      $(".move_file_initial").show() 
     } 
    }); 

}); 

:

<a href="">Some link</a> 
<br/> 
<a class="delete_file_initial" href="">Delete file</a> 
<span class="delete_file_question hide">are you sure to delete?</span> 
<a class="delete_file_question confirm hide" href="http://example.com/delete">yes</a> 
<a class="delete_file_question cancel hide" href="">no</a> 
<br/> 
<a class="move_file_initial" href="">Move file</a> 
<span class="move_file_question hide">are you sure to move?</span> 
<a class="move_file_question confirm hide" href="http://example.com/move">yes</a> 
<a class="move_file_question cancel hide" href="">no</a> 

그리고 자바 스크립트 : 여기

는 HTML입니다. 로드 할 실제 URL이 다르다는 것을 제외하고는 동일한 작업을 수행해야합니다. 예상되는 동작은 다음과 같습니다. 사용자가 "삭제"/ "이동"링크를 클릭하면 확인 링크가 표시되고 해당 작업을 확인 또는 취소합니다.

"delete_file_initial"링크를 클릭하면 숨겨 지지만 "delete_file_question"링크가 표시되지 않고 빈 줄이 남습니다. "이동"블록이 예상대로 작동합니다. 그리고 "이동"블록에 주석을 달면 "삭제"블록이 예상대로 작동하기 시작합니다. 더욱 놀라운 것은이 버그가 Chrome 22.0.1229.79에 나타나지만 Firefox 15.0.1에서는 모든 것이 정상적으로 작동한다는 것입니다.

이 버그를 해결하는 방법?

Answer 1

알려줘 문제 아니었다 HTML 코드 이상하게 자바 스크립트,하지만,있다. <a class="delete_file_initial" href="">Delete file</a> 앞에 먼저 <br/> 태그를 제거했는데 제대로 작동하기 시작했습니다. 전체 코드 블록은 <a> 태그의 집합으로 <br/> 태그로 구분됩니다. 간단한 <ul><li> 구조로 대체했으며 문제가 해결되어 원래의 레이아웃과 기능을 유지했습니다.

누구든지이 문제의 원인을 이해하면 알려 주시기 바랍니다.

Answer 2

jQuery ('. classname')를 사용할 때 문제가 선택기에 있습니다. show() 동일한 클래스 이름을 가진 여러 항목이 없는지 확인하십시오. 도움이되지 않으면 .each() 함수를 사용하십시오. 예를 들어 사용해야하는 코드는 다음과 같습니다. 나는 다음은

자바 스크립트를 작동 희망 :

$(function() { 
    // delete file 
    $("a.delete_file_initial").click(function(event) { 
     event.preventDefault(); 
     $(this).hide(); 
     $(".delete_file_question").each(function(){$(this).show();}); 
    }); 
    $("a.delete_file_question").click(function(event) { 
     if ($(this).hasClass("cancel")) { 
      event.preventDefault() 
      $(".delete_file_question").each(function(){$(this).hide();}); 
      $(".delete_file_initial").show(); 
     } 
    }); 

    // move file 
    $("a.move_file_initial").click(function(event) { 
     event.preventDefault(); 
     $(this).hide(); 
     $(".move_file_question").each(function(){$(this).show();}); 
    }); 
    $("a.move_file_question").click(function(event) { 
     if ($(this).hasClass("cancel")) { 
      event.preventDefault(); 
      $(".move_file_question").each(function(){$(this).hide();}); 
      $(".move_file_initial").show(); 
     } 
    }); 

}); 

가 작동 여부를

Answer 3

setTimeout(function(){$(".delete_file_question").each(function(){$(this).show();});},0);