关于在vue中拼接html的问题，点击事件无法执行

首先是在普通文档（也就是单个html文件中进行测试，能够正常执行）

普通情况下的结果，拼接的结果能够正常渲染并且控制台有输出；

但是在vue环境之下就会出错，点击事件并没有反应，

js部分：

          for (const i in _sourcesName) {
            let liHtml = "";
            for (const j in _sourcesName[i]) {
              liHtml += '<li  class="dataLi">';
              liHtml +=
                '<p>' +
                _sourcesName[i][j] +
                '(' +
                _sourcesRoundNum[i][j] +
                ')' +
                '</p>';
              liHtml += '<span>最近更新: ' + _sourcesTime[i][j] + '</span>';
              liHtml += '</li>';
            }
            if (i == 0) {
              $("#list0").append(liHtml);
            } else if (i == 1) {
              $("#list1").append(liHtml);
            } else if (i == 2) {
              $("#list2").append(liHtml);
            } else if (i == 3) {
              $("#list3").append(liHtml);
            } else if (i == 4) {
              $("#list4").append(liHtml);
            }
          }

　　

      /**点击li下面的p获取不同表格信息 */
    showList() {
    console.log("1111");
      const _this = this;
      // $(".dataLi p").click(function() {
      //   _this.open3();
      //   console.log("点击获取列表");

      // });
      $(".dataLi").on("click","p",function(){
         console.log("点击获取列表");
      });

      // let tabList = $("#tab");
      // tabList.css("display", "block");
      // this.DQZY=

    },

　　

template部分

    <ul class="listUl" id="list3"></ul>

　　结果是页面可以渲染，但是事件不会成功，能够进入输出“1111”，但是点击事件没有进入，我觉得应该是渲染的时间问题，目前还没有解决。