knockout.js - Button click inside div click nothing working -


i have button click event inside div has click event. if user clicks button, insideclick should execute not outsideclick. can share insight?

https://jsfiddle.net/s4om9y1y/

<input type="text" data-bind="value: goal" /> <div data-bind="click: outsideclick">   outside click.    <button data-bind="click: insideclick">     inside click.   </button> </div>    function appviewmodel() {   var self = this;   self.goal = ko.observable(3);    self.outsideclick = function() {     alert('outside click');   };   self.insideclick = function() {     alert('inside click');   };  }  var vm = new appviewmodel();  ko.applybindings(vm); 

you need add clickbubble binding paramter false inner binding:

<button data-bind="click: insideclick, clickbubble: false">   inside click. </button> 

from documentation:

by default, knockout allow click event continue bubble higher level event handlers. example, if element , parent of element both handling click event, click handler both elements triggered. if necessary, can prevent event bubbling including additional binding named clickbubble , passing false it, ... :

demo jsfiddle.


Comments