JQuery селектор не работает правильно

Question

Так вот мой HTML:

<div class="alert alert-info alert-warning" id="rowcounter" style="display: block; bottom: -22px;"> 
    Are you sure you want to delete 103? 
    <div class="btn-toolbar"> 
     <a href="#" class="btn btn-sm btn-success" data-action="deleterow" data-table="contact" data-rowid="103">Yes</a> 
     <a href="#" class="btn btn-sm btn-default" data-action="cancel">No</a> 
    </div> 
</div> 

И мой JQuery (завернутые в тегах сценария и документ, готовый функции):

$('.alert#rowcounter a.btn').on('click',function() { 
    console.log('yes'); 
    if($(this).data('action') == 'cancel') { 
     rowCounter('hide'); 
    } 
    if($(this).data('action') == 'deleterow') { 
     var tbl = $(this).data('table'); 
     var targ = $(this).data('rowid'); 
     $.get('formhandler.php?handle=deleterow&table='+tbl+'&rowid='+targ,function(d) { 
      if(d == 'success') { 
       $('#rowcounter').removeClass().addClass('alert alert-success').html('Successfully removed '+targ+'!'); 
      } 
     }); 
    } 
}); 

По какой-то причине JQuery является не выбирая кнопки на этой панели инструментов, и я не уверен, почему. Если кто-то может помочь мне объяснить причину, почему это не работает, это будет оценено!

Answer 1

Попробуйте это:

$('#rowcounter .btn-toolbar a') 

Answer 2

Используйте #rowcounter a.btn вместо .alert # rowcounter a.btn

$('#rowcounter a.btn').on('click',function() { 
    console.log('yes'); 
    if($(this).data('action') == 'cancel') { 
     rowCounter('hide'); 
    } 
    if($(this).data('action') == 'deleterow') { 
     var tbl = $(this).data('table'); 
     var targ = $(this).data('rowid'); 
     $.get('formhandler.php?handle=deleterow&table='+tbl+'&rowid='+targ,function(d) { 
      if(d == 'success') { 
       $('#rowcounter').removeClass().addClass('alert alert-success').html('Successfully removed '+targ+'!'); 
      } 
     }); 
    } 
});