title: creating an event in the row of a backbone table
body: <p>I'm creating a backbone view that can draw a table with rows and columns (tr, td). </p>
  
  <pre><code> var bodyTable =' &lt;table id="board" style="width: 80%" width="400" height="400px"; ="" border="0" cellspacing="2" cellpadding="2" bgcolor="#000000"&gt;&lt;tbody&gt;
      &lt;tr align= "center" data-row-id= "0" &gt;&lt;td bgcolor= "#ffffffff" &gt; "X&lt;/td" &gt;&lt;td bgcolor= "#ffffff"= "#ffffff"= "#ffffff"= "#&lt;/td" &gt;&lt;td bgcolor= "#ffffffff" &gt;X&lt;/td&gt;&lt;&gt;&lt;td bgcolor= "#ffffffffffffffff" &gt;X&lt;/td&gt;&gt;&gt;&lt;= ".
  
      &lt;tr align= "center" data-row-id= "1" &gt;&lt;td bgcolor= "#ffffffff" &gt;X&lt;/td&gt;&lt;td bgcolor= "#ffffff"= "#ffffff"= "#ffffff"= "#ffffff"= "#td bgcolor=" #ffffffffff "&gt;&lt;td
  
      &lt;tr align="center" data-row-id="2"&gt;&lt;td bgcolor="#ffffffff"&gt;X&lt;/td&gt;&lt;td bgcolor="#ffffff"="#ffffff"="#ffffff"="#ffffff"="#td bgcolor="#ffffffffff"&gt;X&lt;/td&gt;&lt;&gt;&lt;td bgcolor="#ffffffffffffffff"&gt;X&lt;/td&gt;&gt;&gt;&lt;&gt;&lt;=".
  &lt;/tbody&gt;&lt;/table&gt;';
  </code></pre>
  
  <p>In addition I want to launch an event by clicking on a row of the table, and that in the function ("click tr":"insertaFicha") insertaFicha me of the row on which it has been clicked.</p>
  
  <pre><code>var TableroView = Backbone.View.extend({
      el : '#tablero',
      //instanciamos colecciones que necesitaremos acceder de la vista
      collection: {
          colores: coloresCollection,
          jugadores: jugadoresCollection
      },
      events: {
          "click tr": "insertaFicha"
      },
      initialize: function() {
  
          this.render();
  
      },
      //instanciamos el modelo de la vista
      //model : tableroModelo,
      render: function(){
           console.log("render");
  
  
  
          var bodyTablero = '&lt;table id="tablero" style="width:80%" width="400" height="400px" ;="" border="0" cellspacing="2" cellpadding="2" bgcolor="#000000"&gt;&lt;tbody&gt;
              &lt;tr align="center" data-row-id="0"&gt;&lt;td bgcolor="#ffffff"&gt;X&lt;/td&gt;&lt;td bgcolor="#ffffff"&gt;X&lt;/td&gt;&lt;td bgcolor="#ffffff"&gt;X&lt;/td&gt;&lt;td bgcolor="#ffffff"&gt;X&lt;/td&gt;&lt;td bgcolor="#ffffff"&gt;X&lt;/td&gt;&lt;td bgcolor="#ffffff"&gt;X&lt;/td&gt;&lt;td bgcolor="#ffffff"&gt;X&lt;/td&gt;&lt;td bgcolor="#ffffff"&gt;X&lt;/td&gt;&lt;/tr&gt;
  
              &lt;tr align="center" data-row-id="1"&gt;&lt;td bgcolor="#ffffff"&gt;X&lt;/td&gt;&lt;td bgcolor="#ffffff"&gt;X&lt;/td&gt;&lt;td bgcolor="#ffffff"&gt;X&lt;/td&gt;&lt;td bgcolor="#ffffff"&gt;X&lt;/td&gt;&lt;td bgcolor="#ffffff"&gt;X&lt;/td&gt;&lt;td bgcolor="#ffffff"&gt;X&lt;/td&gt;&lt;td bgcolor="#ffffff"&gt;X&lt;/td&gt;&lt;td bgcolor="#ffffff"&gt;X&lt;/td&gt;&lt;/tr&gt;
  
              &lt;tr align="center" data-row-id="2"&gt;&lt;td bgcolor="#ffffff"&gt;X&lt;/td&gt;&lt;td bgcolor="#ffffff"&gt;X&lt;/td&gt;&lt;td bgcolor="#ffffff"&gt;X&lt;/td&gt;&lt;td bgcolor="#ffffff"&gt;X&lt;/td&gt;&lt;td bgcolor="#ffffff"&gt;X&lt;/td&gt;&lt;td bgcolor="#ffffff"&gt;X&lt;/td&gt;&lt;td bgcolor="#ffffff"&gt;X&lt;/td&gt;&lt;td bgcolor="#ffffff"&gt;X&lt;/td&gt;&lt;/tr&gt;
          &lt;/tbody&gt;&lt;/table&gt;';
  
  
          this.$el.html(bodyTablero);
  
      },
      insertaFicha: function() {
           console.log("insertaFicha");
           //aquí voy a insertar fichas en el arraytablero
           //introducir en el tableroArray FichaModel's.
  
              console.log( "row-id", $(event.target).attr('data-row-id'));
      }
  });
  </code></pre>
  
  <p>1) When clicking on a row of the table that draws the view, it arrives at the insertaFicha function.</p>
  
  <p>2) In the chrome $ debugger (event. target) it returns an object but there is no access to the "data-row-id" attribute returns undefined.</p>