asp.net - 按钮不会执行功能onclick

时间:2017-02-25 11:01:22

标签: jquery html button html2canvas

我已经通过某人的帮助获取了这段代码,并希望在点击#print_button后执行该代码。出于某种原因,我不能让它工作,我不知道我哪里出错了?

这是jquery:

     $(document).ready(function () {
         $('#Print_Button').click(function () {


             var html2obj = html2canvas($('#form1'));

             var queue = html2obj.parse();
             var canvas = html2obj.render(queue);
             var img = canvas.toDataURL();

             window.open(img);

         });

     });

以及我的按钮的HTML属性:

id="Print_Button" runat="server" value="Print"

任何人都可以建议我哪里出错吗?

这是正文的完整html:

<form id="form1" runat="server">


    <div class="header">

    <strong class="auto-style11">
        MCN PRINTOUT

    </strong>
        <img alt="Veolia Logo" class="logo" src="logo.png" />
        <input type="button" id="Print_Button" value="click me"/>

    </div>

        <div id="nav">
       <ul>
           <li><a href="login.aspx">Home</a></li>
           <li><a href="MCNForm.aspx">MCN Entry</a></li>
           <li><a href="Search.aspx">MCN Search</a></li>

       </ul>
</div>


            <div id ="main">
        <p id ="main_header"></p>
        <p id ="mcn">DISPOSAL ADVICE/TRANSFER NOTE</p>
        <p id="address">

        </p>

        <table id="table_1"">
            <tr>
                <td class="auto-style12">MCN Ref No.</td>
                <td>
                    <asp:TextBox ID="TextBox1" ReadOnly="True" runat="server" Width="116px"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="auto-style12">Date:</td>
                <td>
                    <asp:TextBox ID="TextBox4" ReadOnly="True" runat="server" Width="116px"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="auto-style12">Time:</td>
                <td>
                    <asp:TextBox ID="TextBox5" runat="server" ReadOnly="True" Width="116px"></asp:TextBox>
                </td>
            </tr>
        </table>

        <img alt="Logo" class="auto-style10" src="logo.png" /><div id ="form">
        <table id="main_table" class = "table table-bordered">
            <tr>
                <td class="auto-style8">SITE:</td>
                <td class="auto-style9">
                    <asp:TextBox ID="TextBox6" runat="server" OnTextChanged="TextBox6_TextChanged" ReadOnly="True"></asp:TextBox>
                </td>
                <td class="auto-style4">HAULIER(CARRIER):</td>
                <td>
                    <asp:TextBox ID="TextBox10" runat="server" ReadOnly="True"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="auto-style8">DESCRIPTION OF WASTE:</td>
                <td class="auto-style9">
                    <asp:TextBox ID="TextBox7" runat="server" ReadOnly="True"></asp:TextBox>
                </td>
                <td class="auto-style4">DESTINATION:</td>
                <td>
                    <asp:TextBox ID="TextBox9" runat="server" ReadOnly="True"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="auto-style8">EWC CODE:</td>
                <td class="auto-style9">
                    <asp:TextBox ID="TextBox8" runat="server" ReadOnly="True"></asp:TextBox>
                </td>
                <td class="auto-style4">VEHICLE REGISTRATION:</td>
                <td>
                    <asp:TextBox ID="TextBox11" runat="server" ReadOnly="True"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="auto-style8">QUANTITY:</td>
                <td class="auto-style9">
                    <asp:TextBox ID="TextBox13" runat="server" ReadOnly="True"></asp:TextBox>
                </td>
                <td class="auto-style4">DRIVER NAME:</td>
                <td>
                    <asp:TextBox ID="TextBox12" runat="server" ReadOnly="True"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="auto-style8">NOMINAL WEIGHT:</td>
                <td class="auto-style9">
                    <asp:TextBox ID="TextBox15" runat="server" ReadOnly="True"></asp:TextBox>
                </td>
                <td class="auto-style4">SKIP ID:</td>
                <td>
                    <asp:TextBox ID="TextBox16" runat="server" ReadOnly="True"></asp:TextBox>
                </td>
            </tr>
            </table>


            <table id="table_2" style="width:30%;">
                <tr>
                    <td>DUTY OF CARE:</td>
                    <td>
                        <asp:TextBox ID="TextBox14" runat="server" OnTextChanged="TextBox14_TextChanged"></asp:TextBox>
                    </td>
                </tr>
            </table>
        </div>

        <p id="tsandcs">

        </p>

    </div>    



<div class="footer">



    <p id ="footer_menu">Menu</p>
    <p id="copyright">© 2017 ...</p>


</div>




</form>

1 个答案:

答案 0 :(得分:0)

使用输入类型按钮

&#13;
&#13;
 $(document).ready(function () {
         $('#Print_Button').click(function () {
          alert("Clicked");

          //your code here

         });

     });
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" id="Print_Button" value="click me"/>
&#13;
&#13;
&#13;