Question

有没有人建议使用嵌入式按钮构建嵌套的可折叠文件。在附加的jsbin中，单击静态可折叠中的嵌入按钮将动态地嵌套另一个可折叠的自己的按钮。问题是我看不到链接到动态创建的可收集按钮的方法，因此该过程可以继续。我试图在按钮父元素上使用trigger（）和enhancedWithin（）。

http://jsbin.com/helif/4/edit

Answer 1

事件委托应该有效：

$(document).on("click", ".collapsibleButton", function(e){...});

这应该绑定到具有该类名的任何动态创建的按钮。

如果这对您不起作用，那么每次创建动态可折叠时，使用.off（）删除单击处理程序，使用.on（）重新添加它：

$(".collapsibleButton").on("click", function(e){
        onClick(e);
});

function onClick(e){
        alert("COLLAPSIBLE BUTTON CLICKED");
        console.log("clicked on "+$(e.target).attr('class') );      
        var element =
        "<div data-role='collapsible' class='collapsible' data-collapsed='false'>" +
            "<h3 class='collapsibleTitle'><p>Dynamic Collapsible</p>" +
                "<div class='button-set' style='float: right'>" +
                    "<input type='button' class='collapsibleButton' value='Button' data-mini='true' data-icon='gear' data-icon-pos='top' />" +
                "</div>" +
            "</h3>" +
            "<div class='content'><p>CONTENT</p></div>" +
        "</div>";

        $(element).appendTo($(e.target).closest('.collapsible').find('.content:first'));
        $(e.target).closest('.collapsible').find('.content:first').enhanceWithin();
        $(e.target).closest('.collapsible').find('.content:first').find('.button-set:first').enhanceWithin();      

        $(".collapsibleButton").off("click").on("click", function(e){
            onClick(e);
        });

        e.stopPropagation();
        e.stopImmediatePropagation();  
        return false;

}

jQuery Mobile动态嵌套可折叠嵌入式按钮

1 个答案: