javascript - bootstrap3 - hide.bs.dropdown function firing regardless of .click definition? ..with fiddle -



javascript - bootstrap3 - hide.bs.dropdown function firing regardless of .click definition? ..with fiddle -

have setup .click event calls setread() function when dropdown-menu closes, triggers ajax call.

right now, reason setread() function beingness called regardless of .click definition.. http://jsfiddle.net/n2v9s/6/

setread() should called when .markread clicked, not .markedread

here's html (it involves handlebars templating, value different id each btn):

<div class="thisness"> <div class="exterior"> <input type="hidden" name="storyid" id="storyid" class="storyid" value="id1" /> <div class="interior"> <div class="btn-group dropdown markread"> <button type="button" class="btn dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-unchecked"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> </ul> </div><!--/.btn-group(dropdown)--> </div></div><!--/.interior/.exterior--> ... </div><!--/.thisness-->

here's javascript/jquery:

function setread(id, markedread, datetimeread) { var ajaxreaddata = { id : id, markedread : markedread, datetimeread : datetimeread }; // create ajax phone call alert('ajax of ' + id + ' markedread: ' + markedread + ' @ ' + datetimeread); console.log(ajaxreaddata.id + " message marked read: " + ajaxreaddata.markedread); } $(document).ready(function(){ $(".thisness").on("click", ".markread", function () { var datetimeread = new date(); // setting datetime when read console.log('markread clicked'); var $this = $(this), $that = $(this).closest('.exterior').find('.glyphicon-unchecked'); markedread = true; $that.removeclass('glyphicon-unchecked').addclass('glyphicon-check'); console.log('now checked icon'); $this.removeclass('markread').addclass('markedread'); console.log('now markedread class'); var id = $(this).closest('.exterior').find( ".storyid" ).val(); console.log(id); console.log('ready ajax of ' + id + ' markedread: ' + markedread + ' @ ' + datetimeread); // when .markread (now .markedread) dropdown closes $(".thisness").on("hide.bs.dropdown", $this , function () { console.log('ajax of ' + id + ' markedread: ' + markedread + ' @ ' + datetimeread); setread(id, markedread, datetimeread); }) }); }); // doc ready

also tested .when , .then jquery promise, runs before dropdown-menu hidden?

$.when( $(".thisness").on("hide.bs.dropdown", $this) ).then(function () { console.log('ajax of ' + id + ' markedread: ' + markedread + ' @ ' + datetimeread); setread(id, markedread, datetimeread); })

the issue attaching event handler. so, it's not goes away outside if statement, it's been attached. test, manually set 1 of glyphicons check , run page. you'll see after clicking checked icon, , selecting it's dropdown, setread() doesn't run.

use one() function instead of on().

$(".thisness").one("hide.bs.dropdown", $this , function () { console.log('ajax of ' + id + ' markedread: ' + markedread + ' @ ' + datetimeread); setread(id, markedread, datetimeread); })

javascript jquery html ajax twitter-bootstrap-3

Comments

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -