jquery를 사용하여 사용자 정의 효과로 DIV 표시

내 전체 스크립트가 실행되고 있지만 div를 클릭하면 div가 숨기고있는 것은 아니지만 숨길 코드가 생겼습니다 .... 내가 실수 한 부분을 말해 줄 수 있습니다.jquery를 사용하여 사용자 정의 효과로 DIV 표시

여기 내 코드

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<style type="text/css"> 
.lnkcss 
{ 
    margin-left:350px; 
} 

.BusyStyles 
    { 
     background-image: url('images/ajax-loader.gif'); 
     background-repeat: no-repeat; background-position: center center; 
    } 

#transition { 

display:none; 
position:absolute; top:50%; left:50%; z-index:50; 
border:1px solid #666; 
width:100px; height:100px; 
} 

</style> 
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#lnk').click(function (e) { 
      $('body').append('<div id="transition"></div>').show(); 

      var $t = $('#transition'), 
      to = $(this).offset(), 
      td = $(document); 

      //$t.children('div').css({ width: 100, height: 100 }); 
      $t.css({ 
       top: to.top + 50, 
       left: to.left + 50, 
       display: 'block' 
      }).animate({ 
       top: td.height()/2, 
       left: td.width()/2 
      }, 600, function() { 
       $(this).animate({ 
        top: '-=75', 
        left: '-=50' 
       }, 600); 

       $(this).animate({ 
        width: 250, 
        height: 200 
       }, 600, function() { 
        $('#transition').addClass("BusyStyles"); 

       }); 
      }); 
      return false; 
     }); 

     $('#transition').click(function (e) { 
      alert('pp'); 
      $(this).hide(); 
     }); 
    }); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<a href="#" id='lnk' class="lnkcss">FeedBack</a> 
</form> 
</body> 
</html> 

$('#transition').click(function (e) { 
      alert('pp'); 
      $(this).hide(); 
     });

내가 DIV 숨길 쓴 위의 라인이지만 내가 사업부를 클릭하면 아무것도 일어나지 않을 것입니다.

출처

2012-09-24 Thomas

이벤트는 시간에 존재하는 모든 '#transition'요소에 적용되는 변경해야합니다, 당신은 핸들러를 인스턴스화하려고합니다. 이 요소는 동적으로 만들어 지므로 현재로서는 이러한 요소가 없습니다.

당신은 바로 요소를 만든 후 이벤트 핸들러를 적용 할 수 있습니다

는

http://jsfiddle.net/Du5k8/

출처

2012-09-24 19:22:42 Mark

위의 스크립트는 IE 8에서 같은 방식으로 작동하지 않는 주요한 것들. IE에서 스크립트를 실행하면 u가 차이를 보일 것입니다. 그래서 IE를위한 좋은 수정이 될 것입니다. 감사. – Thomas

$('body').append('<div id="transition"></div>') 문서를 처리 한 후 페이지에 요소를 추가하려면 정적 부모 요소에 bind any event handlers이 필요합니다.

$('#transition').click(function (e) { 
    alert('pp'); 
    $(this).hide(); 
});

이

$('body').on('click', '#transition', function (e) { 
    alert('pp'); 
    $(this).hide(); 
});

출처

2012-09-24 19:18:42 Ohgodwhy

미안 하시다면 스크립트가 작동하지 않았다. jquery 버전 jquery-1.4.1.min.js 사용하고 있습니다. ur 스크립트가 오류를 발생시킵니다. 어쨌든 thnxfor 시도. – Thomas

@ 토마스 jQuery를 업그레이드해야합니다. '.on()'은 jQuery 1.7 +에 대한 예외이다. 업그레이드로 인한 몰락은 없을 것입니다. – Ohgodwhy

위의 스크립트가 IE 8에서 같은 방식으로 작동하지 않는다는 하나의 주요한 점은 IE에서 스크립트를 실행하면 u가 달라집니다. 거대한 깜박임이 발생합니다. 제발 http://jsfiddle.net/Du5k8/이 url에 가서 만약 당신이 IE에 대한 좋은 수정을 알고 다음 세부 사항을 무엇을 변경 말해 주시기 바랍니다. 감사. – Thomas

jquery를 사용하여 사용자 정의 효과로 DIV 표시

답변

관련 문제