0

我有一个 JQM 可折叠，它是在单击按钮时动态创建的。我想动态创建嵌套的可折叠项，我需要像我们为普通的 html 控件一样通过传递作为控件对象的“this”来注册一个 javascript。

for (var i = 0; i < arrList.length; i++) {
           var arr = arrList[i].split('#');
           var Programme = arr[0];
           var arr2 = arr[1].split('><');
           var revenue = arr2[0];
           var time = arr2[1];

      // Append a new collapsible and store it into a JQuery object                 
      $('#tdDynamic').append('<div id="collapsible_PG' + i + '" 
                                   data-role="collapsible" 
                                   data-collapsed="true" 
                                   data-theme="e" 
                                   data-content-theme="c"'
                                   + ' onclick="onexpand(this);"></div>');

       // Append the list header and store it into a JQuery object
       var collapsible = $('#collapsible_PG' + i);

      collapsible.append('<h3 id="h3Text_PG' + i + '">' 
                           + Programme + '&nbsp;&nbsp;&nbsp;' 
                           + time + '&nbsp;&nbsp;&nbsp;' 
                           + revenue + '</h3>');
//var h3Text = $('#h3Text' + i);
//collapsible.bind('expand', function () { onexpand('#h3Text' + i); });
                            collapsible.collapsible();
    }

有些这样onclick="onexpand(this);"的可能吗？

在按钮单击我尝试使用

collapsible.bind('expand', function () { onexpand(collapsible); });

但这只是给出了所有动态生成的可折叠 onclick 的最后一个 id。因此，即使我单击第一个可折叠文件，它也会显示最后一个已绑定的文件。我猜这个绑定会被循环中添加的每个新的collpasible覆盖，这就是为什么我在寻找像onclick ='funcName（this）'这样的东西。我是 JQM 的新手，请指出我正确的方向。

我已经提到了各种 SO 问题，但找不到任何对我有帮助的东西。

我引用了这个 jsfiddle 示例。

4

1 回答 1

0

由于评论很有用，并且您可能已经找到了基于它的解决方案，因此我将其作为答案。

您可以将click事件处理程序附加到生成collapsible. 这样，所有未来的项目都将被自动覆盖：

IE：

// Select all divs which id starts with...
$("div[id^='collapsible_PG']").on("click", function () {
    // $(this) here will refer to the exactly element clicked
    onexpand($(this));
});

$('#tdDynamic').append('<div id="collapsible_PG' + i + '" 
    data-role="collapsible" 
    data-collapsed="true" 
    data-theme="e" 
    data-content-theme="c"></div>');
于 2013-09-10T12:20:38.097 回答