triggers - Initiate a jQuery plugin on multiple elements. Click triggered multiple times -
i have written simple jquery plugin slice ul or ol elements on client side witnessing strange behaviour while initiating on multiple elements. plugin hides items in list , show specified number of items. appends more/less link list user can toggle items. following code plugin.
/** * jquery list slice v1.0 * * slices list ('ul', 'ol') , shows more/less link either show more * or less 'li's respectively. * * @usage: * list following: * * <ul id="sample-list"> * <li>item 1</li> * <li>item 2</li> * <li>item 3</li> * </ul> * * initiate slicelist follows: * * $('ul.sample-list').listslice({ * default_items: 2, // set other options here * }); */ (function($) { $.fn.listslice = function(options) { // merge or override user defined options options = $.extend({}, $.fn.listslice.options, options); var entity = $(this); /** * slices initiating list show number of default_items * , append more link list. */ function slicelist(){ entity.find('li').addclass('listsliceitem'); // make sure not count items in ignore_list ignore_list = options.ignore_list.split(','); $.each(ignore_list, function() { var class_name = '.' + $.trim(this); var id_name = '#' + $.trim(this); var obj = entity.find(class_name); obj.removeclass('listsliceitem'); if (!(obj.is('li'))) { obj.closest('li').removeclass('listsliceitem'); } var obj = entity.find(id_name); obj.removeclass('listsliceitem'); if (!(obj.is('li'))) { obj.closest('li').removeclass('listsliceitem'); } }); $.each(entity, function() { var current_entity = $(this); var should_apply = true; if((current_entity.find('li.listsliceitem').length) <= ( options.default_items)) { should_apply = false; } // make sure apply more/less lists have // enough 'li' elements. if(should_apply) { current_entity.find('li.listsliceitem' + ':gt(' + (options.default_items - 1).tostring() + ')').hide(); current_entity.append('<' + options.link_container + ' class="' + options.link_container_class + '">' + '<a href="#!" class="listslicemore ' + options.link_class + '">' + options.more_text + '</a>'); } }); } /** * uses slidetoggle method toggle between showing more or less * list items in initiated list. */ function togglemoreless(btn){ var dad = btn.parent().parent(); dad.find('li.listsliceitem' + ':gt(' + (options.default_items - 1).tostring() + ')').slidetoggle(options.animation_time); btn.text(btn.text() == options.more_text ? options.less_text : options.more_text); } /** * initiate slicelist method , more link click method. */ slicelist(); $('a.listslicemore').click( function() { togglemoreless($(this)); return false; // cancel default anchor action. // prevents appending '#!' end of url }); } // default options $.fn.listslice.options = { // default number of items displayed (accepts integer only). default_items: 5, // more anchor link's label when hiding items (accepts strings only). more_text: 'more', // more anchor link's label when showing items (accepts strings only). less_text: 'less', // class names applied more link (accepts strings only). link_class: 'more link', // class names applied more link's container (accepts strings only). link_container_class: 'more', // element wraps more link. (accepts strings only) link_container: 'li', // amount of time in miliseconds show/hide animation should run.(accepts integer , strings) animation_time: 500, // ignore 'li' items counted part of list have following classes // or id's. comma separated list of classes or id's or both. (accepts strings only) ignore_list: 'ignore, no-include, all', } })(jquery); now, here scenario. have html format follows:
<div id ="one"> <ul class="item_list"> <li> sample item </li> <li> sample item </li> <li> sample item </li> <li> sample item </li> <li> sample item </li> </ul> </div> <div id ="two"> <ul class="item_list"> <li> sample item </li> <li> sample item </li> <li> sample item </li> <li> sample item </li> <li> sample item </li> </ul> </div> <div id ="three"> <ul class="item_list"> <li> sample item </li> <li> sample item </li> <li> sample item </li> <li> sample item </li> <li> sample item </li> </ul> </div> <div id ="four"> <ul class="item_list"> <li> sample item </li> <li> sample item </li> <li> sample item </li> <li> sample item </li> <li> sample item </li> </ul> </div> and initiate plugin follows:
<script type="text/javascript"> $('.item_list').listslice(); </script> it works absolutely fine. want set different options above 4 elements , bind them separately follows.
<script type="text/javascript"> $('div#one .item_list').listslice({ some_option: some_value, }); $('div#two .item_list').listslice({ some_option: some_value, }); $('div#three .item_list').listslice({ some_option: some_value, }); $('div#four .item_list').listslice({ some_option: some_value, }); </script> this when gets little confusing. behaviour see here is:
if click on
more/lesslink first list, click gets triggered 4 times, animation slides , down 4 times.if click on more/less link second list, click gets triggered 3 times.
if click on more/less link third list, click gets triggered 2 times.
if click on more/less link fourth list, works fine. (i.e click being triggered 1 time)
here jsfiddle showing problem facing.
does has idea causing ? thanks.
add preventdefault() click handler on more link. limit action togglemoreless() function:
$('a.listslicemore').click( function() { togglemoreless($(this)); e.preventdefault(); return false; // cancel default anchor action. // prevents appending '#!' end of url }); 
Comments
Post a Comment