31689


bootstrapのリストがクリックされたときに`active`をクラスに追加たいと考えているのですが、以下のコードではクリックイベントが発火しませんでした。どのようにすればクリックイベントを発火させることができるのでしょうか。

**javascript**

[code]

            $('.list-group .list-group-item').on('click', function(e){
              console.log('aa');
              $(".list-group .list-group-item").removeClass("active");
              $(e.target).addClass("active");
            });
    
[/code]

**html**

[code]

    <ul class="list-group" id="map-list">
      <li class="list-group-item" v-for="map in maps">{% map %}</li>
    </ul>
    
[/code]

リストはvue.jsを使って生成しています。


CC BY-SA 3.0
2017-01-07T07:34:05.883
31687
2017-01-07T10:22:51.560
7232
question
javascript bootstrap vue.js
クリックイベントが発火しない


`.on(events,
handler)`を使う場合、jQueryオブジェクトに現在格納されているDOM要素、つまり現在存在するDOM要素だけにイベントが設定されます。つまり、Vue.jsによりリストが生成された後でjQueryのイベント設定コードを実行する必要があります。  
さらに言えば、Vue.jsを使用する場合、`#map-list`の子要素は動的に変化すると考えられますので、たとえば`.on(events,
selector, handler)`を用いて親要素にイベントを設定しておくことで、動的に追加された要素などに対してもイベントを発火させることが可能です。  
注意としては親要素（サンプル中`container`）はVue.jsにより置換されますので、やはりVue.jsのあとにコードを配置する必要があります。もちろん、これを回避するため`#map-
list`より上位の親要素にイベントを設定することも可能ですが、パフォーマンスやクラス名の衝突などに注意する必要があります。

[code]

    let container = document.querySelector('#map-list');
    let childSelector = '.list-group-item';
    let activeClassName = 'active';
    
    // binding
    let sourceObj = {
        maps: [ 'aaa', 'bbb', 'ccc' ],
    };
    let bmap = new Vue({ el: container, data: sourceObj });
    
    // will be false
    console.log(bmap.$el === container);
    
    let $container = $(bmap.$el);
    
    $container.on('click', childSelector, e =>
        $(e.target).addClass(activeClassName).siblings().removeClass(activeClassName));
    
    // add item dynamically
    sourceObj.maps.push('ddd');
[/code]

[code]

    .active { color: red; }
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
    
    <ul class="list-group" id="map-list">
      <li class="list-group-item" v-for="map in maps">{{ map }}</li>
    </ul>
[/code]


CC BY-SA 3.0
2017-01-07T10:22:51.560
31689
2017-01-07T10:22:51.560
31687
answer