0

I want to create stand alone component means kind of widget I have some limitation I cannot use jquery widget library. I want to know what is the right way to bind events on component. for example I want to create some sort of button group If I use that button group anywhere in application it should have ability to accepts callback. where ever If I used this component it should work.

HTML

<div id="btn-grp" data-callback="list of callback function here" data-value="selected button value" data-valid="false">
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
<button id="btn3">Button 3</button>
</div>

Javascript would be

$("body").on('click', '.btn-grp', function() {
  console.log("hey you clicked on button ....");
   forloop(){
      invoke callback 1 or 2 or so many
   }
});

One way could be I can create plugin for each component can you please share some sort of wrapper function look like for creating components.

Aᴍɪʀ
  • 7,623
  • 3
  • 38
  • 52
nancy
  • 267
  • 1
  • 3
  • 8
  • One example is but with other framework sameway I need for jquery http://derickbailey.com/2015/08/26/building-a-component-based-web-ui-with-modern-javascript-frameworks/ – nancy Dec 30 '15 at 19:58

1 Answers1

0

Ok - I'll take a whack at this but I am sure someone else will be able to answer it better than I can. :-/

I believe that how you are trying to do this is not possible. I believe you have to bind each button individually to what you want them to do. The problem is that, in the example you gave, whatever callback you put on the DIV only the DIV will be affected and any callback you put on a button only the button will be affected. So the callback on the DIV will only trigger if you click some place the buttons are not (like an open area around the buttons).

I believe there is a way to set things up so when the mouse button is depressed it just triggers a callback and then you can do some processing to figure out exactly which area (like a button) the mouse was clicked on. But that is probably overkill.

I think the easier way to handle this is to put a callback on each button that sends an argument stating which button was pushed and if you need to be able to call different functions for each button depending upon where it is located, then just send the function name as an argument. Then use the indirect method of calling that funcion. Check out this Stack Overflow question for more information - or Google how to do indirect calls within Javascript:

Indirect function call in JavaScript

Community
  • 1
  • 1
Mark Manning
  • 1,427
  • 12
  • 14
  • I cannot put callback function on each button, this widget will bheave like component there are some callback attached and that callback will be called on any button of click. Simply I wan to create UI component. Like as mentioned in below link using jquery http://callmenick.com/post/javascript-objects-building-javascript-component-part-1 – nancy Dec 30 '15 at 20:15
  • AH! I think I have found what you are looking for. Try this: http://stackoverflow.com/questions/2265297/jquery-get-mouse-click-if-inside-a-div-or-not. Look at the example farther down. They attach the click command to the body and then ask which DIV it is going to. – Mark Manning Dec 31 '15 at 19:28