第一次单击时更改元素类，然后再次单击并更改回正常 [英] Change element class on first click then click again and change back to normal

问题描述

我有以下代码:

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.

现在的问题是我想让它回到检查按钮，但是由于它是动态创建的，因此当我单击删除"图标或* _enable_ben_ *时它不会触发.我认为这是因为在创建事件时，类/元素尚不存在.

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.

你有什么主意吗?

推荐答案

使用.on http://api.jquery.com/on/

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

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

这篇关于第一次单击时更改元素类，然后再次单击并更改回正常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！