Backbone.js delegateEvents()

The Backbone.js delegateEvents method is used to bind the elements to the specified DOM with callback methods to handle events. This method can attach the events to the view if events are removed from the view.

Syntax:

Parameter explanation:

events : It specifies events that are needed for reattaching to the view.

Let's take an example.

See this example:

 <!DOCTYPE html>
   <head>
      <title>View Example</title>
         <script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
   </head>
   <body>
      <div id="mydiv"></div>
      <script type="text/javascript">
         var ViewDemo = Backbone.View.extend({
            events: {'click button': 'delegateFunc'},
               delegateFunc: function () {
                  this.remove();   
                  document.write("JavaTpoint: A solution of all technology.....");
               },
     
               render: function () {
                 
                  this.$el.html('<button>Click to delegate events</button>');
               },
               initialize:function(){this.render();}
         });
         var myview = new ViewDemo({el: '#mydiv'});   
         myview.delegateEvents();
         </script>
         </body>
      </html>

Test it Now

Output:

Save the above code in deligate.html file and open this file in a new browser.