0

ボタンのクリックで動的に作成される JQM 折りたたみ式があります。コントロールオブジェクトである「this」を渡すことにより、通常のhtmlコントロールの場合と同様に、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 を提供するだけです。そのため、最初の折りたたみ可能なものをクリックしても、最後にバインドされたものが表示されます。バインドは、ループに追加されたすべての新しい折りたたみ式で上書きされると思います。そのため、onclick = 'funcName(this)' のようなものを探していました。私はJQMが初めてです。正しい方向に向けてください。

さまざまなSOの質問を参照しましたが、役立つものは何も見つかりませんでした.

私はこのjsfiddleの例を参照しました。

4

1 に答える 1

0

コメントは役に立ち、おそらくそれに基づいて解決策を見つけたので、それを答えにしています。

clickを生成するブロックからイベント ハンドラをアタッチできますcollapsible。このようにして、将来のすべての項目が自動的にカバーされます。

すなわち:

// 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 に答える