title: filtering table rows on search makes the onClick not working
body: <p>I am facing this weird issue in my reactjs application. I am having an HTML table and I have a search bar which searches for whatever is entered in the bar, filters all the rows which have that searched term and then highlight it in these filtered rows. There is onkeyUp event attached to search input field. I have an onClick attached to all the rows. </p>
  
  <p><strong>Problem:</strong> When I search and then click on rows, the onClick doesn't work. When I click before I search anything, the onClick works.</p>
  
  <p><strong>Suspected Issue:</strong> Every time I search anything, on every onkeyup event, the table gets deleted completely and rebuilds with only the rows which have searched team in it. This might be taking away onclick method away from the new table which is built. </p>
  
  <p>Here is my HTML and search function </p>
  
  <pre><code> searchFunction() {
  
  
          var input, filter, table, tr, td, i;
          input = document.getElementById("search-table");
          var value = input.value
  
  
  
          filter = input.value.toUpperCase();
          table = document.getElementById("speech-table");
          table.innerHTML=bak;
          tr = table.getElementsByTagName("tr");
          for (i = 0; i &lt; tr.length; i++) {
              td = tr[i].getElementsByTagName("td")[1];
              var a1= td.getElementsByTagName("a")[0];
              if (td) {
                  if (td.innerHTML.toUpperCase().indexOf(filter) &gt; -1) {
                      var trimIndex=a1.innerHTML.toUpperCase().indexOf(filter);
                      var endIndex=trimIndex + filter.length + 3;
                      var output = [a1.innerHTML.slice(0, trimIndex), '&lt;b&gt;', a1.innerHTML.slice(trimIndex)].join('');
                      output = [output.slice(0, endIndex), '&lt;/b&gt;', output.slice(endIndex)].join('');
                      a1.innerHTML=output;
                      tr[i].style.display = "";
                  } else {
                      tr[i].style.display = "none";
                  }
              }
          }
  
      }
  </code></pre>
  
  <p>my search input and table html</p>
  
  <pre><code>input type="text" id="search-table" onChange={() =&gt; this.searchFunction()}
                                 className="form-control search-sentances pull-right"
                                 placeholder="Search"/&gt;
                      &lt;/div&gt;
                      &lt;div className="panel-body scrollable no-pad-top-pad-bot2 sentance-scrollable"&gt;
                          &lt;div className="subtitle-scroll"&gt;
                              &lt;div className="tab-content"&gt;
                                  &lt;div className="tab-pane slide-left active" id="tab2sentancetable"&gt;
                              &lt;table className="table sentance-table" id="speech-table"&gt;
                                  &lt;tbody&gt;
                                  {this.state.sentances_array.map((item, i) =&gt; (
                                      &lt;tr key={item.id} id={item.id} onClick={() =&gt; this.sentance_click(item.time)}&gt;
                                          &lt;td className="edit-timing-sub"&gt;&lt;span className="bold fs-12 text-success"&gt;{item.time.toFixed(2)}&lt;/span&gt;&lt;br/&gt;
                                              &lt;span className="bold fs-12 text-success"&gt;{item.stopTime.toFixed(2)}&lt;/span&gt;
                                          &lt;/td&gt;
                                          &lt;td&gt;
                                              &lt;EditableTextField name='username' value={item.words} onUpdate={this.handleRowUpdate} placeholder='Enter spoken words'/&gt;
                                          &lt;/td&gt;
                                          &lt;td&gt;
                                              &lt;a href="#" className="text-danger fs-16"&gt;&lt;span
                                                  className="fa fa-pencil m-l-10"&gt;&lt;/span&gt;&lt;/a&gt;
                                              &lt;a href="#" className="text-danger fs-16"&gt;&lt;span
                                                  className="fa fa-trash m-l-10" onClick={()=&gt;this.deleteRow(item.id)}&gt;&lt;/span&gt;&lt;/a&gt;
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
                                  ))}
  
  
                                  &lt;/tbody&gt;
                              &lt;/table&gt;
  </code></pre>
  
  <p>How can I make onClick work even after the search? </p>