본문 바로가기

jQuery trigger() 메서드 사용 trigger()마우스를 엘리먼트에 마우스오버하지 않고 어떤 버튼을 클릭했을때 마우스오버 이벤트를 발생하고 싶을 때! $(document).ready(function(){var box = $('#box');box.bind({mouseover:function(){var tg = $(this);tg.removeClass().addClass('over');tg.find('> p').text('mouseover');},mouseout:function(){var tg = $(this);tg.removeClass().addClass('out');tg.find('> p').text('mouseout');},click:function(){var tg = $(this);tg.removeClass().addClass('c.. 더보기
jQuery 이벤트타입명으로 메서드 호출 bind() : 하나의 엘리먼트에 여러가지 이벤트를 생성 하는 경우 유리 box.bind({},mouseout:function(){var target = $(this); target.removeClass().addClass('mouseout');target.find('> p').text('mouseout 이벤트 발생');},mousedown:function(){var target = $(this);target.removeClass().addClass('mousedown');target.find('> p').text('mousedown 이벤트 발생');},mouseup:function(){var target = $(this); target.removeClass().addClass('mouseup');tar.. 더보기
jQuery on() 동적으로 추가된 엘리먼트 이벤트 발생시키기 on() 메서드 [box 추가 ] 버튼을 클릭하면 동적으로 box엘리먼트가 추가 됩니다.기존의 box 엘리먼트의 이벤트는 잘 동작하지만 동적으로 추가된 box엘리먼트에는 이벤트가 동작하지 않습니다. 이것은 bind() 메서드는 동적으로 생성된 엘리먼트를 찾지 못하기 때문입니다.on() 메서드로 수정하여 동적으로 추가된 엘리먼트의 이벤트가 동작하도록 수정합니다. html * { margin:0; padding:0; } #wrapper { margin-left:300px; } #nav > input { margin-left:300px; } .box { width:150px; height:150px; border:2px solid blue;} .box.over { background-color: red; } .. 더보기