title: Adding ClassName of td with in the click event
body: <p>I have use the following code snippet to create the tr of table in Jquery.</p>
  
  <p>Code snippet:</p>
  
  <pre><code>&lt;tr&gt;
          &lt;td class="rowcell"&gt;
              &lt;div&gt;
                  &lt;div class="intend" style="width: 24px; height: 1px; float: left;"&gt;&lt;/div&gt;
                  &lt;div class="style='float:" left'=""&gt;&lt;/div&gt;
                  &lt;div style="width: 10px; height: 1px; float: left;"&gt;&lt;/div&gt;
                  &lt;div&gt;Task 3&lt;/div&gt;
              &lt;/div&gt;
          &lt;/td&gt;
          &lt;td class="rowcell"&gt;
              &lt;div&gt;01/01/2013&lt;/div&gt;
          &lt;/td&gt;
          &lt;td class="rowcell"&gt;
              &lt;div&gt;01/05/2013&lt;/div&gt;
          &lt;/td&gt;&lt;td class="rowcell"&gt;
              &lt;div&gt;5 days&lt;/div&gt;
               &lt;/td&gt;
          &lt;td class="rowcell"&gt;
              &lt;div&gt;77&lt;/div&gt;
          &lt;/td&gt;
          &lt;/tr&gt;
  </code></pre>
  
  <p>In this case I have invoke the click event for parent of the table. with in the click event I have use the following code snippet to change the className of td to apply the Selection Background, but ClassName cannot change in this case.</p>
  
  <p>Code Snippet</p>
  
  <pre><code>//Here $ganttGridRows table rows.
          var $ganttGridRows = $(this.getGanttGridTreeRows());
  
          //Clicking in the row
          var row = $target.closest('tr');
  
  
          var index = $ganttGridRows.index(row);
          var item = this.model.currentViewRange[recordIndex];
          this.model.selectedRow = this.model.ganttRecords.indexOf(item);
          var args = {};
          if (this.model.selectedRow != -1)
              args = { currentRowIndex: this.model.selectedRow, currrentRow: $ganttGridRows.eq(this.model.selectedRow), currentData: this.model.ganttRecords[this.model.selectedRow] };
          if (this._trigger("rowSelecting", args))
              return;
          this.cleanUpSelection();
          this._selectedRowsIndexes = [];
          var cell = $target.closest('td');
          //Here index is the rowindex of the selected row
          $($ganttGridRows[index]).find('.rowcell').addClass("selectionbackground");
  </code></pre>
  
  <p>But in this did not working while using div with in the td. But if I use without div in td and directly assign the text like below code snippet and it is working fine for me.</p>
  
  <p>Code Snippet    </p>
  
  <pre><code>&lt;tr&gt;
           &lt;td class="rowcell"&gt;Task 1&lt;/td&gt;
          &lt;td class="rowcell"&gt;01/01/2013&lt;/td&gt;
          &lt;td class="rowcell"&gt;01/05/2013&lt;/td&gt;
          &lt;td class="rowcell"&gt;5 days&lt;/td&gt;
          &lt;td class="rowcell"&gt;31&lt;/td&gt;
          &lt;/tr&gt;
  </code></pre>
  
  <p>Can you pleases any look in to this and provide suggestion to resolve this problem and , explain what is the reason for this behaviour.</p>