關於在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”，但是點擊事件沒有進入，我覺得應該是渲染的時間問題，目前還沒有解決。

 

后期思考：

append中的節點是在整個文檔加載完之后開始添加，頁面不會為append的元素初始化添加點擊事件；

頁面並不會為未來的元素初始化添加點擊事件，所以使用這種方式動態添加的節點中的點擊事件沒有生效。

在這里提供兩種方法：

1.采用

$(document).on("click", ".dataLi p", function(index,$event)代替

$(".dataLi p").click(function(index,$event)

           $(document).on("click", ".dataLi p", function(index,$event)
                  // $(".dataLi p").click(function(index,$event)
                   {
             this.current=index;
      　　　　　　 //獲取點擊對象
                 var el = event.currentTarget;
                //  alert("當前對象的內容："+el.innerHTML);
                console.log(el.innerHTML);
                 _this.DQZY =el.innerHTML;
            });

　　2.vue自帶的@click（v-on:click）是無法實現的,采用js原本的onclick="showList(event,this)事件

    for (const j in _sourcesName[i]) {
              liHtml += '<li class="dataLi">';
              liHtml +=
                '<p onclick="showList(event,this)">' +
                _sourcesName[i][j] +
                "</p>";
              liHtml +=
                ' <span class="span1">(' +
                _sourcesRoundNum[i][j] +
                ") </span><br>";
              liHtml +=
                '<span class="span2">最近更新: ' +
                _sourcesTime[i][j] +
                "</span>";
              liHtml += "</li>";
            }

　　

      window.showList = function(event, el) {
        console.log("1111");
        console.log(event, el);
        _this.DQZY = el.innerHTML;
      };