Как добавить событие click для динамического создания элемента jquery

Question

Я пытался добавить событие click для динамических идентификаторов в строке таблицы. Я установил ID строки для каждой строки таблицы. Теперь я хочу добавить событие click, чтобы показать строку (class = "hidden"), скользящую в переключении. Фактически строка таблицы будет печатать через цикл, используя классический код asp.

<table id="bus-list" class="table table-bordered table-result"> 
         <thead style="background-color: #FCA04E"> 
          <tr> 
           <th>Bus Operator</th> 
           <th>Bus Type</th> 
           <th>Depart</th> 
           <th>Arrive</th> 
           <th>Duration</th> 
           <th>#</th> 
          </tr> 
         </thead> 
         <tbody> 
          <tr id="" class="display"> 
           <td> 
            <span class="operator">Greenline</span> 
            <span class="bus-type">Volvo A/C Seater (2+2)</span> 
           </td> 
           <td>Volvo Sleeper</td> 
           <td> 
            <span class="time">16:10</span> 
            <span class="station">Esplanade</span> 
           </td> 
           <td> 
            <span class="time">19:10</span> 
            <span class="station">City Center</span> 
           </td> 
           <td>3Hours</td> 
           <td> 
            <button type="button" id="" name="selectBus" class="btn btn-block btn-success btn-select">Select</button> 
           </td> 
          </tr> 
          <tr id="" class="hidden"> 
           <td colspan="6"> 
            <div class="buss-info"> 
             <table class="table table-condensed table-bus"> 
              <thead> 
               <tr> 
                <th>Seat Type</th> 
                <th>Seats</th> 
                <th>Price</th> 
                <th>&nbsp;</th> 
               </tr> 
              </thead> 
              <tbody> 
               <tr> 
                <td>Lower Deck</td> 
                <td>31</td> 
                <td>650.00</td> 
                <td><button type="button" name="book" class="btn btn-block btn-danger">Book Now</button></td> 
               </tr> 
              </tbody> 
             </table> 
            </div> 
           </td> 
          </tr> 
          <tr id="" class="display"> 
           <td> 
            <span class="operator">Greenline</span> 
            <span class="bus-type">Volvo A/C Seater (2+2)</span> 
           </td> 
           <td>Volvo Sleeper</td> 
           <td> 
            <span class="time">16:10</span> 
            <span class="station">Esplanade</span> 
           </td> 
           <td> 
            <span class="time">19:10</span> 
            <span class="station">City Center</span> 
           </td> 
           <td>3Hours</td> 
           <td> 
            <button type="button" id="" name="selectBus" class="btn btn-block btn-success btn-select">Select</button> 
           </td> 
          </tr> 
          <tr id="" class="hidden"> 
           <td colspan="6"> 
            <div class="buss-info"> 
             <table class="table table-bordered table-condensed table-bordered table-bus"> 
              <thead> 
               <tr> 
                <th>Seat Type</th> 
                <th>Seats</th> 
                <th>Price</th> 
                <th>&nbsp;</th> 
               </tr> 
              </thead> 
              <tbody> 
               <tr> 
                <td>Lower Deck</td> 
                <td>31</td> 
                <td>650.00</td> 
                <td><button type="button" name="book" class="btn btn-block btn-danger">Book Now</button></td> 
               </tr> 
              </tbody> 
             </table> 
            </div> 
           </td> 
          </tr> 
          <tr id="" class="display"> 
           <td> 
            <span class="operator">Greenline</span> 
            <span class="bus-type">Volvo A/C Seater (2+2)</span> 
           </td> 
           <td>Volvo Sleeper</td> 
           <td> 
            <span class="time">16:10</span> 
            <span class="station">Esplanade</span> 
           </td> 
           <td> 
            <span class="time">19:10</span> 
            <span class="station">City Center</span> 
           </td> 
           <td>3Hours</td> 
           <td> 
            <button type="button" id="" name="selectBus" class="btn btn-block btn-success btn-select">Select</button> 
           </td> 
          </tr> 
          <tr id="" class="hidden"> 
           <td colspan="6"> 
            <div class="buss-info"> 
             <table class="table table-bordered table-condensed table-bordered table-bus"> 
              <thead> 
               <tr> 
                <th>Seat Type</th> 
                <th>Seats</th> 
                <th>Price</th> 
                <th>&nbsp;</th> 
               </tr> 
              </thead> 
              <tbody> 
               <tr> 
                <td>Lower Deck</td> 
                <td>31</td> 
                <td>650.00</td> 
                <td><button type="button" name="book" class="btn btn-block btn-danger">Book Now</button></td> 
               </tr> 
              </tbody> 
             </table> 
            </div> 
           </td> 
          </tr> 
          <tr id="" class="display"> 
           <td> 
            <span class="operator">Greenline</span> 
            <span class="bus-type">Volvo A/C Seater (2+2)</span> 
           </td> 
           <td>Volvo Sleeper</td> 
           <td> 
            <span class="time">16:10</span> 
            <span class="station">Esplanade</span> 
           </td> 
           <td> 
            <span class="time">19:10</span> 
            <span class="station">City Center</span> 
           </td> 
           <td>3Hours</td> 
           <td> 
            <button type="button" id="" name="selectBus" class="btn btn-block btn-success btn-select">Select</button> 
           </td> 
          </tr> 
          <tr id="" class="hidden"> 
           <td colspan="6"> 
            <div class="buss-info"> 
             <table class="table table-bordered table-condensed table-bordered table-bus"> 
              <thead> 
               <tr> 
                <th>Seat Type</th> 
                <th>Seats</th> 
                <th>Price</th> 
                <th>&nbsp;</th> 
               </tr> 
              </thead> 
              <tbody> 
               <tr> 
                <td>Lower Deck</td> 
                <td>31</td> 
                <td>650.00</td> 
                <td><button type="button" name="book" class="btn btn-block btn-danger">Book Now</button></td> 
               </tr> 
              </tbody> 
             </table> 
            </div> 
           </td> 
          </tr> 


         </tbody> 
        </table> 

Вот мой JQuery код для установки строки ID:

$(document).ready(function(e) { 
    var counter = 0; 
    $("#bus-list tbody tr.hidden").each(function(){ 
     counter++; 
     var newdivid = 'bus-more-div-' + counter; 
     $(this).attr('id',newdivid); 
    }); 

    var bCount = 0; 

    $("#bus-list tbody tr.display td button[name='selectBus']").each(function(){ 

     bCount++; 
     var newid = 'btn-viewMore-' + bCount; 
     $(this).attr('id',newid); 
     var dd = $(this).attr('id'); 

     $('#btn-viewMore-' + bCount).on('click',function(){ 

     }); 

    }); 

Я faild добавить кнопку событий щелчка, чтобы показать скрыть Пожалуйста, помогите мне.

Answer 1

Вы действительно не нужны все это, вы можете просто переключиться на следующий тр родственных кнопок щелкнутой

$('.btn-select').click(function() { 
 
    $(this).closest('tr').next('tr').toggleClass('display hidden') 
 
})

.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table id="bus-list" class="table table-bordered table-result"> 
 
    <thead style="background-color: #FCA04E"> 
 
    <tr> 
 
     <th>Bus Operator</th> 
 
     <th>Bus Type</th> 
 
     <th>Depart</th> 
 
     <th>Arrive</th> 
 
     <th>Duration</th> 
 
     <th>#</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr id="" class="display"> 
 
     <td> 
 
     <span class="operator">Greenline</span> 
 
     <span class="bus-type">Volvo A/C Seater (2+2)</span> 
 
     </td> 
 
     <td>Volvo Sleeper</td> 
 
     <td> 
 
     <span class="time">16:10</span> 
 
     <span class="station">Esplanade</span> 
 
     </td> 
 
     <td> 
 
     <span class="time">19:10</span> 
 
     <span class="station">City Center</span> 
 
     </td> 
 
     <td>3Hours</td> 
 
     <td> 
 
     <button type="button" id="" name="selectBus" class="btn btn-block btn-success btn-select">Select</button> 
 
     </td> 
 
    </tr> 
 
    <tr id="" class="hidden"> 
 
     <td colspan="6"> 
 
     <div class="buss-info"> 
 
      <table class="table table-condensed table-bus"> 
 
      <thead> 
 
       <tr> 
 
       <th>Seat Type</th> 
 
       <th>Seats</th> 
 
       <th>Price</th> 
 
       <th>&nbsp;</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr> 
 
       <td>Lower Deck</td> 
 
       <td>31</td> 
 
       <td>650.00</td> 
 
       <td> 
 
        <button type="button" name="book" class="btn btn-block btn-danger">Book Now</button> 
 
       </td> 
 
       </tr> 
 
      </tbody> 
 
      </table> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    <tr id="" class="display"> 
 
     <td> 
 
     <span class="operator">Greenline</span> 
 
     <span class="bus-type">Volvo A/C Seater (2+2)</span> 
 
     </td> 
 
     <td>Volvo Sleeper</td> 
 
     <td> 
 
     <span class="time">16:10</span> 
 
     <span class="station">Esplanade</span> 
 
     </td> 
 
     <td> 
 
     <span class="time">19:10</span> 
 
     <span class="station">City Center</span> 
 
     </td> 
 
     <td>3Hours</td> 
 
     <td> 
 
     <button type="button" id="" name="selectBus" class="btn btn-block btn-success btn-select">Select</button> 
 
     </td> 
 
    </tr> 
 
    <tr id="" class="hidden"> 
 
     <td colspan="6"> 
 
     <div class="buss-info"> 
 
      <table class="table table-bordered table-condensed table-bordered table-bus"> 
 
      <thead> 
 
       <tr> 
 
       <th>Seat Type</th> 
 
       <th>Seats</th> 
 
       <th>Price</th> 
 
       <th>&nbsp;</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr> 
 
       <td>Lower Deck</td> 
 
       <td>31</td> 
 
       <td>650.00</td> 
 
       <td> 
 
        <button type="button" name="book" class="btn btn-block btn-danger">Book Now</button> 
 
       </td> 
 
       </tr> 
 
      </tbody> 
 
      </table> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    <tr id="" class="display"> 
 
     <td> 
 
     <span class="operator">Greenline</span> 
 
     <span class="bus-type">Volvo A/C Seater (2+2)</span> 
 
     </td> 
 
     <td>Volvo Sleeper</td> 
 
     <td> 
 
     <span class="time">16:10</span> 
 
     <span class="station">Esplanade</span> 
 
     </td> 
 
     <td> 
 
     <span class="time">19:10</span> 
 
     <span class="station">City Center</span> 
 
     </td> 
 
     <td>3Hours</td> 
 
     <td> 
 
     <button type="button" id="" name="selectBus" class="btn btn-block btn-success btn-select">Select</button> 
 
     </td> 
 
    </tr> 
 
    <tr id="" class="hidden"> 
 
     <td colspan="6"> 
 
     <div class="buss-info"> 
 
      <table class="table table-bordered table-condensed table-bordered table-bus"> 
 
      <thead> 
 
       <tr> 
 
       <th>Seat Type</th> 
 
       <th>Seats</th> 
 
       <th>Price</th> 
 
       <th>&nbsp;</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr> 
 
       <td>Lower Deck</td> 
 
       <td>31</td> 
 
       <td>650.00</td> 
 
       <td> 
 
        <button type="button" name="book" class="btn btn-block btn-danger">Book Now</button> 
 
       </td> 
 
       </tr> 
 
      </tbody> 
 
      </table> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    <tr id="" class="display"> 
 
     <td> 
 
     <span class="operator">Greenline</span> 
 
     <span class="bus-type">Volvo A/C Seater (2+2)</span> 
 
     </td> 
 
     <td>Volvo Sleeper</td> 
 
     <td> 
 
     <span class="time">16:10</span> 
 
     <span class="station">Esplanade</span> 
 
     </td> 
 
     <td> 
 
     <span class="time">19:10</span> 
 
     <span class="station">City Center</span> 
 
     </td> 
 
     <td>3Hours</td> 
 
     <td> 
 
     <button type="button" id="" name="selectBus" class="btn btn-block btn-success btn-select">Select</button> 
 
     </td> 
 
    </tr> 
 
    <tr id="" class="hidden"> 
 
     <td colspan="6"> 
 
     <div class="buss-info"> 
 
      <table class="table table-bordered table-condensed table-bordered table-bus"> 
 
      <thead> 
 
       <tr> 
 
       <th>Seat Type</th> 
 
       <th>Seats</th> 
 
       <th>Price</th> 
 
       <th>&nbsp;</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr> 
 
       <td>Lower Deck</td> 
 
       <td>31</td> 
 
       <td>650.00</td> 
 
       <td> 
 
        <button type="button" name="book" class="btn btn-block btn-danger">Book Now</button> 
 
       </td> 
 
       </tr> 
 
      </tbody> 
 
      </table> 
 
     </div> 
 
     </td> 
 
    </tr> 
 

 

 
    </tbody> 
 
</table>