

[jquery Bonsai](https://github.com/aexmachina/jquery-bonsai)
というプラグインを改造してjqueryのオリジナルプラグインを作成しています。

<https://github.com/14021939/dropdownCheckCombobox>

[dropdownCheckCombobox.js（96行目）](https://github.com/14021939/dropdownCheckCombobox)で、this.bonsaiの子nodeが取得できません。（コンソールでの出力ではObject[]になります。）

丸投げで本当に申し訳ありませんが、なぜなのかさっぱりわかりません。助けてください。


CC BY-SA 3.0
2015-08-11T03:46:58.677
14259
2015-08-11T04:49:26.630
2015-08-11T04:13:04.520
8000
10719
question
javascript jquery
子nodeが取得できない


ブラウザの開発者ツールでブレークポイントを設定してみると、次のようになりました。

![ss](https://i.stack.imgur.com/w8Nuj.png)

取得の仕方に問題があるわけではなく、実際その時点では `this.bonsai`
の子要素は何もないです。しかし一通りスクリプトを実行した後で確認すると、ちゃんとそこにリストやチェックボックスが生成されています。となると、
**チェックボックスが生成される前に上の処理が行われるのが問題** ということになります。

[`DropdownCheckCombobox.prototype.createBonsai`](https://github.com/14021939/dropdownCheckCombobox/blob/master/jquery.dropdownCheckCombobox.js#L59-L73)
が以下のようになっていますよね。

[code]

    this.bonsai = listTag.jsonList({
      url: self.options.dataUrl,
      onListItem: function(event, listItem, data, isGroup) {
        if(!isGroup){listItem.attr('data-value', data.id);}
      },
      onSuccess: function(event, jsonList)  {
          return $(this.el).find('> ol').bonsai({
            checkboxes: true,
            createInputs: 'checkbox',
            handleDuplicateCheckboxes: true,
            expandAll: true
          });
        }
    });
    this.handleCombobox();
    
[/code]

`jsonList()` は url の読み込みを **非同期に** 開始し、それ自身はすぐにreturnします。そして読み込みが完了したところで
onSuccess を実行します。そのため、`$(this.el).find('> ol').bonsai()` はきちんと読み込み後に実行されますが、
`this.handleCombobox()` は読み込みを待たずに実行されてしまいます。

そして `onSuccess` の戻り値は使われないようなので、 `bonsai()` を return する意味はありません。

まとめると、`jsonList()` の `onSuccess` の中で、 `bonsai()` を実行した後に、 `handleCombobox()`
を呼び出す必要がある、ということになります。こんな感じでしょうか。

[code]

    this.bonsai = listTag.jsonList({
      url: self.options.dataUrl,
      onListItem: function(event, listItem, data, isGroup) {
        if(!isGroup){listItem.attr('data-value', data.id);}
      },
      onSuccess: function(event, jsonList)  {
          $(this.el).find('> ol').bonsai({
            checkboxes: true,
            createInputs: 'checkbox',
            handleDuplicateCheckboxes: true,
            expandAll: true
          });
          self.handleCombobox();
        }
    });
    
[/code]

`onSuccess` の中では this が別のものになっているので、 self を使うことに注意してください。


CC BY-SA 3.0
2015-08-11T04:49:26.630
14261
2015-08-11T04:49:26.630
8000
14259
answer