Javascript，无法捕获按钮单击

Question

此模板位于“朋友”页面init上。 我尝试用2种方法来调用按钮单击：button＃id或仅使用#id进行调用，但我无法捕获按钮单击。 我已经调试了它，并且它从未加入onClick函数。 我将不胜感激任何帮助或文档链接。 谢谢你的时间。

<script class="friend-list" type="text/template7">
    <div class="friendsamigos">
      <ul>
        {{#each this}}
          <li><a>{{this.displayName}}</a><button id="getfriendprofile" class="col button button-fill button-little" data="{{this.uid}}" >"Go"</button></li>             
        {{/each}}
      </ul> 
    </div>   
  </script>

$$(document).on('page:init', '.page[data-name="friends"]', function(e){
    console.log("Friends page loaded");
    postMyFriends();
    $$('#back-home-button').on('click', function(e){
        view.router.navigate('/home/')
    })
    $$('#getfriendprofile').on('click', function(e){
        var friendUID = $$(this).data();
        console.log(friendUID);
        console.log($$(this).data());
        //requestFriendProfile(friendUID);
    })

Answer 1

解决了。 问题是我在页面初始化时加载了onclick函数。 虽然尚未加载模板。 我做了这样的事情：

 <script class="friend-list" type="text/template7">
    <div class="friendsamigos" id="id-list-amigos">
      <ul>
        {{#each this}}
          <li><a>{{this.displayName}}</a><button class="friendProfileButton col button button-fill button-little" data-uid={{this.uid}} >"Go"</button></li>             
        {{/each}}
      </ul> 
    </div>   
  </script>

并在模板加载后加载onclick函数：

function postMyFriends(){
    var localStorageUserData = JSON.parse(localStorage.getItem('myuser'));
    var uid = localStorageUserData.uid;
    app.request.post(serverurl + 'postMyFriends', {user : uid}, onSuccess, onError)

    function onSuccess(data, status){
        if( status === 200){

         TemplatesWorkInRequest('.friend-list', '#friendsamigos', data )

        }
        $$('.friendProfileButton').on('click', function(e) {
            var friendUID = $$(this).data('uid');
            console.log(friendUID);
           // requestFriendProfile(friendUID);
        });

    }
    function onError(err){
        console.log(`Something went wrong ${err}`)
    }

}

我认为不需要，但是这是模板功能：

function TemplatesWorkInRequest(templateToCompile, insertPathSelector, data){
    var template = $$(templateToCompile).html();
    var compiletTemplate = Template7.compile(template);

    var dataToJSON = JSON.parse(data)
    var html = compiletTemplate(dataToJSON);
    $$(insertPathSelector).html(html);

}

谢谢大家对我的帮助

Answer 2

在代码中使用$代替$$，如下所示：

$(document).on('page:init', '.page[data-name="friends"]', function(e){
    console.log("Friends page loaded");
    postMyFriends();
    $('#back-home-button').on('click', function(e){
        view.router.navigate('/home/')
    })
    $('#getfriendprofile').on('click', function(e){
        var friendUID = $(this).data();
        console.log(friendUID);
        console.log($(this).data());
        //requestFriendProfile(friendUID);
    })