How to solve the problem that Wechat's built-in browser does not support onclick?

The

project is forced to use the jquery and then do the click event. The element is written dead, not dynamically loaded, there is no delegate, but the click .on ("click") does not take effect, and the onclick native does not take effect, but it can be clicked in the browser. How to deal with the compatibility of Wechat?
the page structure is as follows

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<meta name="viewport"
      content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0"/>

<!-- <link rel="stylesheet" href="./css/global.css">
<link rel="stylesheet" href="./css/production.css"> -->


<div class="production">
    <div class="header">
        <div class="nav">
            <img src="./img/qinshi.png" alt="">
        </div>
        <div class="title">
            
       <!--          <span>222
                    <img src="./img/perform.png" alt="">
                </span> -->
            
        </div>
    </div>
</div>


<div class="tabBarWrapper">
    <div class="line"></div>
    <div class="tabBar">
        <!--1242 -zuo160  w300-->
        <div class="stance"></div>
        <a href="javascript：;"  class="works"></a>
        <div class="center"></div>
        <a href="javascript：;" class="abstract"></a>
        <div class="stance"></div>
    </div>
</div>

<!--margin top 0.5rem-->
<div class="containWrapper">

    <div class="contain">
        <div class="banner">
            <!--344  7.96-->
            <div class="jietu">
                <img class="cover" src="" alt="">
                <img src="./img/play.png" alt="">
            </div>
            <div class="slider">
                <p class="bookname">
                <p class="studio">:<span></span>:<span></span>
                <p class="explain">
            </div>
        </div>
    </div>
</div>


<div class="introduction" style="display: none">
    <div class="container">
        
        
            19531
    </div>
</div>



<!-- <script src="./js/jquery.min.js"></script> -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>


    $(function () {

        $(".works").on("click", function () {
            $(this).css({"border-bottom": "0.162rem solid -sharpce3d3a", "color": "-sharpce3d3a"})
            $(".abstract").css({"border": "0px", "color": "-sharp999999"})
            $(".containWrapper").show()
            $(".introduction").hide()
        })


        $(".abstract").on("click", function () {
            $(this).css({"border-bottom": "0.162rem solid -sharpce3d3a", "color": "-sharpce3d3a"})
            $(".works").css({"border": "0px", "color": "-sharp999999"})
            $(".containWrapper").hide()
            $(".introduction").show()
        })

        for(var i =0;i<$(".cover").length;iPP){
            if($($(".cover")[i]).attr("src")){
                // $($(".cover")[i]).attr("src","./img/jietu1.png")
            }else {
                $($(".cover")[i]).attr("src","./img/jietu1.png")
            }
        }
    })




</script>

</body>
</html>

<%@ Page Language="C-sharp" AutoEventWireup="true" ValidateRequest="false" CodeFile="anchor.aspx.cs" Inherits="App_Share_Anchor" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0"/> <link rel="stylesheet" href="./css/global.css"> <link rel="stylesheet" href="./css/add.css">  <div class="production"> <div class="header"> <div class="nav"> <img src="<%= cover%>" alt="" style="border-radius: 4rem"> </div> <div class="title"> <span><%= name%> <img src="./img/perform.png" alt=""> </span> </div> </div> </div> <div class="tabBarWrapper"> <div class="line"></div> <div class="tabBar">  <div class="stance"></div> <a href="javascript：;" class="works" >1</a> <div class="center"></div> <a href="javascript：;" class="abstract">2</a> <div class="stance"></div> </div> </div>  <div class="containWrapper"> <form runat="server"> <asp:GridView ID="GridView1" border=0 runat="server" AutoGenerateColumns="False" EnableModelValidation="True" EmptyDataText="" GridLines="None"> <Columns> <asp:TemplateField > <ItemTemplate> <a href='http://cnquting.com/Player/index.aspx?bookid=<%-sharpEval("id")%>'> <div class="contain"> <div class="banner">  <div class="jietu"> <img class="cover" src='<%-sharpEval("cover")%>' alt=""> <img src="./img/play.png" alt=""> </div> <div class="slider"> <p class="bookname" style="text-align: left"><%-sharpEval("bookname")%> <p class="studio" style="text-align: left">:<span><%-sharpEval("reader")%></span>:<span><%-sharpEval("bookauthor")%></span> <p class="explain" style="text-align: left"><%-sharpEval("introduction")%> </div> </div> </div> </a> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </form> </div> <div class="introduction" style="display: none"> <div class="container"> <%= name%> <%= remark%> </div> </div> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script> $(function () { //----------------------------------------- $("*").bind("click",function(){}); //----------------------------------------- $('.works').on('click ', function () { $(this).css({'border-bottom': '0.162rem solid -sharpce3d3a', 'color': '-sharpce3d3a'}) $('.abstract').css({'border': '0px', 'color': '-sharp999999'}) $('.containWrapper').show() $('.introduction').hide() }) $('.abstract').on('click ', function () { $(this).css({'border-bottom': '0.162rem solid -sharpce3d3a', 'color': '-sharpce3d3a'}) $('.works').css({'border': '0px', 'color': '-sharp999999'}) $('.containWrapper').hide() $('.introduction').show() }) for(var i =0;i<$('.cover').length;iPP){ if($($('.cover')[i]).attr('src')){ // $($('.cover')[i]).attr('src','./img/jietu1.png') }else { $($('.cover')[i]).attr('src','./img/jietu1.png') } } }) </script> </body> </html>