jquery - 加载 Modal 时注入(inject) Javascript

Question

我有一个小问题，我正在尝试实现这个 fiddle http://jsfiddle.net/yXRSz/ 中发生的事情基本上，它会在阅读条款和条件后启用按钮。

我遇到的问题是我希望这发生在 AjaxControlToolkit 模态窗口中。当模式出现并且滚动条移动时，JavaScript 不会运行滚动函数。滚动条是div上的溢出

我希望这是因为加载 JS 时模式被隐藏，我尝试添加 onload 和 oninit 方法并将脚本注入(inject)到页面但没有运气，任何人都知道我如何注入(inject)一次然后模式已加载？

下面的代码

<asp:Panel ID="pnlAcceptTerms" runat="server">
                        <div id="divTerms" class="modal modal_styled_dark" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-header">
                                <h3 id="H1">Terms & Conditions</h3>
                                <p>
                                    You have chosen to enter score values, in order for us to proceed with the values you have entered you must accept
                                    that we hold no responsibility for the values that you have entered. If you decline this we will only display the factual information.
                                </p>
                            </div>
                            <div class="modal-body" id="divTermsScrollArea" runat="server">
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                            </div>
                            <div class="modal-footer">
                                <div class="button-wrapper submit-button-wrapper clearfix">
                                    <div class="button-input-wrapper submit-button-input-wrapper" style="float: left;">
                                        <asp:Button ID="btnDeclineTerms" runat="server" Text="I Decline Terms" CssClass="ka-form-submit"
                                            CausesValidation="false" OnClick="btnDeclineTerms_Click" />
                                    </div>
                                    <div class="button-input-wrapper submit-button-input-wrapper" style="float: right;">
                                        <asp:Button ID="btnAcceptTerms" runat="server" Text="I Accept Terms" CssClass="ka-form-submit"
                                            OnClick="btnAcceptTerms_Click" UseSubmitBehavior="true" Enabled="false" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="divScrollScript" runat="server"></div>
                    </asp:Panel>
                    <ajaxToolkit:ModalPopupExtender ID="mpeTerms" runat="server" TargetControlID="btnHideMe2"
                        PopupControlID="pnlAcceptTerms" DropShadow="true" BackgroundCssClass="modal-backdrop" OnLoad="mpeTerms_Load" OnInit="mpeTerms_Init">
                    </ajaxToolkit:ModalPopupExtender>

我有背后的代码

            string script = "";
        script += "<script type=\"text/javascript\">\r\n";
        script += "     alert('#" + divTermsScrollArea.ClientID + "');\r\n";
        script += "     jQuery('#" + divTermsScrollArea.ClientID + "').scroll(function () {\r\n";
        script += "         alert(jQuery(this).scrollTop());\r\n";
        script += "         if (jQuery(this).scrollTop() == jQuery(this)[0].scrollHeight - (jQuery(this).height() + 30)) {\r\n";
        script += "             jQuery('#" + btnAcceptTerms.ClientID + "').removeAttr('disabled');\r\n";
        script += "         }\r\n";
        script += "     });\r\n";
        script += "</script>\r\n";

        divScrollScript.InnerHtml = script;

+30 是因为 div 上有内边距

干杯乔。

Answer 1

string script = "";
script += "<script type=\"text/javascript\">\r\n";
script += "   jQuery(function() {\r\n";
script += "     jQuery(document).on('scroll', '#" + divTermsScrollArea.ClientID + "', function () {\r\n";
script += "         if (jQuery(this).scrollTop() == jQuery(this)[0].scrollHeight - (jQuery(this).height() + 30)) {\r\n";
script += "             jQuery('#" + btnAcceptTerms.ClientID + "').prop('disabled', false);\r\n";
script += "         }\r\n";
script += "     });\r\n";
script += "   });\r\n";
script += "</script>\r\n";​