Change element class on first click then click again and change back to normal

问题

I have the following code:

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);
        });
}

I have a list that is split in two, the right part being a button, to accept or reject. What I am attempting to do is that the check button, when clicked changes color and becomes a delete button, also performs an action. That I have been successful at it.

Now th problem is that I want to get it back to a check button, but as it is dynamically created I it doesn't trigger when I click the "delete" icon or the *_enable_ben_*. I assume it is because when I create the event the class/element doesn't exist yet.

Do you have any ideas?

回答1:

Use .on http://api.jquery.com/on/

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

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

回答2:

Found the solution to the last question in the comment right here in stackoverflow:

jQuery Mobile click events on dynamic list items

来源：https://stackoverflow.com/questions/15559585/change-element-class-on-first-click-then-click-again-and-change-back-to-normal

标签

jquery-mobile