Изменить элемент класса на первый щелчок затем нажмите снова и вернуться к нормальной

Question

я следующий код:

for (var i=0; i<len; i++){ 
     var benID = results.rows.item(i).ID; 
     $('#'+element_id).append(
            "<li><a>"+results.rows.item(i).nombres+" "+results.rows.item(i).apellidos+'</a>'+ 
            '<a href="#" data-position-to="window" data-icon="check" class="'+page+'_dis_ben_'+benID+'">Eliminar</a></li>'); 
     $("."+page+"_dis_ben_"+benID).click(function(){ 
      console.log("Item to disable: "+benID); 
      $(this).children('span.ui-btn-inner').children('span.ui-btn-icon-notext').children('span.ui-btn-inner').children('span.ui-icon').removeClass('ui-icon-check'); 
      $(this).children('span.ui-btn-inner').children('span.ui-btn-icon-notext').children('span.ui-btn-inner').children('span.ui-icon').addClass('ui-icon-delete'); 
      $(this).children('span.ui-btn-inner').children('span.ui-btn-icon-notext').children('span.ui-btn-inner').addClass('ui-btn-inner-red'); 
      $(this).removeClass(page+"_dis_ben_"+benID).addClass(page+"_enable_ben_"+benID); 
     }); 

     $("."+page+"_enable_ben_"+benID).click(function(){ 
      //NOT WORKING 
      console.log("Item to enable: "+benID); 
      $(this).children('span.ui-btn-inner').children('span.ui-btn-icon-notext').children('span.ui-btn-inner').children('span.ui-icon').removeClass('ui-icon-delete'); 
      $(this).children('span.ui-btn-inner').children('span.ui-btn-icon-notext').children('span.ui-btn-inner').children('span.ui-icon').addClass('ui-icon-check'); 
      $(this).children('span.ui-btn-inner').children('span.ui-btn-icon-notext').children('span.ui-btn-inner').removeClass('ui-btn-inner-red'); 
      $(this).removeClass(page+"_enable_ben_"+benID).addClass(page+"_dis_ben_"+benID); 
     }); 
} 

У меня есть список, который разделяется на две части, правая часть является кнопка, чтобы принять или отказаться. То, что я пытаюсь сделать, заключается в том, что кнопка проверки при щелчке меняет цвет и становится кнопкой удаления, также выполняет действие. Я добился успеха в этом.

Теперь проблема заключается в том, что я хочу вернуть ее на кнопку проверки, но поскольку она динамически создана, она не срабатывает, когда я нажимаю значок «удалить» или * _enable_ben_ *. Я предполагаю, что это связано с тем, что когда я создаю событие, класс/элемент еще не существует.

Есть ли у вас идеи?

Answer 1

Использование .он http://api.jquery.com/on/

var selector = "."+page+"_enable_ben_"+benID; 

$("#yourList").on("click", selector, function(event){ 
    //Insert handler code 
}); 

Answer 2

Найдено решение последнего вопроса в комментарии прямо здесь, в StackOverflow:

jQuery Mobile click events on dynamic list items