Jquery Delegate

by aaronk85

HTML

<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>

CSS

.testwrap {
    float: left;
    background: orange;
    width: 500px;
}

.testclass {
    background: none repeat scroll 0 0 yellow;
    border: 1px solid red;
    float: left;
    font-size: 28px;
    height: 40px;
    margin: 7px 3px;
    overflow: hidden;
    width: 100px;
    text-align: center;
}
.testtitle {
    float:left;
    display:inline;
    width: 100%;
}

JavaScript

$("body").delegate("p", "myCustomEvent", function(){
$(this).append
('<div class="testwrap"><div class="testtitle"><h3>Test title 1</h3></div><span style="float:left" id="prev">prev</span><div class="testclass test1">1</div><div class="testclass test2">2</div><div class="testclass test3">3</div><div class="testclass test4">4</div><div class="testclass test5">5</div><div class="testclass test6">6</div><div class="testclass test7">7</div><div class="testclass test8">8</div><div class="testclass test9">9</div><div class="testclass test10">10</div><span style="float:right" id="next">next</span></div>');
$('.testclass:gt(3)').hide();

$('#prev').click(function() {
    var first = $('.testwrap').children('.testclass:visible:last');
    if(first.prevAll('.testclass:lt(4)').length == 4){
    first.prevAll('.testclass:lt(4)').show();
    first.prev().nextAll('.testclass').hide();
    }
});

$('#next').click(function() {
    var last = $('.testwrap').children('.testclass:visible:first');
    if(last.nextAll('.testclass:lt(4)').length == 4){
    last.nextAll('.testclass:lt(4)').show();
        last.next().prevAll('.testclass').hide();
    }
});
});

$("button").click(function () {
	$("p").trigger("myCustomEvent");
});