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

使用.on 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

首次单击更改元素类，然后再次单击并更改回正常

2 个答案: