javascript - 更新面板中的按钮不会由 JavaScript 触发

Question

如果调用该函数并且按钮位于更新面板内，则它将不会触发(尽管直接单击它可以工作) - 将其放在更新面板之外并且脚本可以工作。

有什么想法吗？

<div>

<asp:UpdatePanel ID="UpdatePanel2" runat="server">
    <ContentTemplate>
      <asp:Button ID="GridViewLBClicked" runat="server"   />
       </ContentTemplate>
   <%-- 
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="GridViewLBClicked" EventName="Click" />
    </Triggers>--%>
</asp:UpdatePanel>

    </div>

 <script>
     function RaiseEvent_Click() {
         document.getElementById('<%=GridViewLBClicked.ClientID%>').click();
         alert('It was clicked');
    }

</script>

乔斯

我怀疑其他一些加载的 javascript 可能会导致问题，因为我之前也遇到过同样的事情 - 这是其他加载的脚本

function LinkButtonClick(){ alert('This was clicked'); __doPostBack('ContentPlaceHolder1_GridViewLBClicked', ''); } var sessionTimeoutWarning = '18'; var sessionTimeout = '20'; var timeOnPageLoad = new Date(); var sessionWarningTimer = null; var redirectToWelcomePageTimer = null; var sessionWarningTimer = setTimeout('SessionWarning()', parseInt(sessionTimeoutWarning) * 60 * 1000); var redirectToWelcomePageTimer = setTimeout('RedirectToWelcomePage()', parseInt(sessionTimeout) * 60 * 1000); function SessionWarning() { var minutesForExpiry = (parseInt(sessionTimeout) - parseInt(sessionTimeoutWarning)); var message = 'Your session will expire in another ' + minutesForExpiry + ' mins. Do you want to extend the session?'; $('#SessionModal').modal('show'); var currentTime = new Date(); var timeForExpiry = timeOnPageLoad.setMinutes(timeOnPageLoad.getMinutes() + parseInt(sessionTimeout)); if (Date.parse(currentTime) > timeForExpiry) { window.location = 'http://localhost:53818/Logout_Landing/SessionEnded'; } } function RedirectToWelcomePage() { window.location = 'http://localhost:53818/Logout_Landing/SessionEnded'; } $(document).ready(function(){ var divWidth = document.getElementById('imageHeader').clientWidth; var imagePadding = 75; var imageOneWidth = document.getElementById('TopImage_1').width; var imageTwoWidth = document.getElementById('TopImage_2').width; var imageThreeWidth = document.getElementById('TopImage_3').width; var imageFourWidth = document.getElementById('TopImage_4').width; var imageFiveWidth = document.getElementById('TopImage_5').width; var totalImageWidth = imagePadding + imageOneWidth + imageTwoWidth + imageThreeWidth + imageFourWidth + imageFiveWidth; var widthDifference = divWidth - totalImageWidth; var percentDifference = Math.round(widthDifference / divWidth * 100); var imageOne = document.getElementById('TopImage_1'); var imageTwo = document.getElementById('TopImage_2'); var imageThree = document.getElementById('TopImage_3'); var imageFour = document.getElementById('TopImage_4'); var imageFive = document.getElementById('TopImage_5'); var currentHeight = imageOne.height; imageOne.style.height = Math.round(currentHeight + (currentHeight / 100 * percentDifference)) + "px"; imageTwo.style.height = Math.round(currentHeight + (currentHeight / 100 * percentDifference)) + "px"; imageThree.style.height = Math.round(currentHeight + (currentHeight / 100 * percentDifference)) + "px"; imageFour.style.height = Math.round(currentHeight + (currentHeight / 100 * percentDifference)) + "px"; imageFive.style.height = Math.round(currentHeight + (currentHeight / 100 * percentDifference)) + "px"; }); window.onresize = function () { var divWidth = document.getElementById('imageHeader').clientWidth; var imagePadding = 75; var imageOneWidth = document.getElementById('TopImage_1').width; var imageTwoWidth = document.getElementById('TopImage_2').width; var imageThreeWidth = document.getElementById('TopImage_3').width; var imageFourWidth = document.getElementById('TopImage_4').width; var imageFiveWidth = document.getElementById('TopImage_5').width; var totalImageWidth = imagePadding + imageOneWidth + imageTwoWidth + imageThreeWidth + imageFourWidth + imageFiveWidth; var widthDifference = divWidth - totalImageWidth; var percentDifference = Math.round(widthDifference / divWidth * 100); var imageOne = document.getElementById('TopImage_1'); var imageTwo = document.getElementById('TopImage_2'); var imageThree = document.getElementById('TopImage_3'); var imageFour = document.getElementById('TopImage_4'); var imageFive = document.getElementById('TopImage_5'); var currentHeight = imageOne.height; imageOne.style.height = Math.round(currentHeight + (currentHeight / 100 * percentDifference)) + "px"; imageTwo.style.height = Math.round(currentHeight + (currentHeight / 100 * percentDifference)) + "px"; imageThree.style.height = Math.round(currentHeight + (currentHeight / 100 * percentDifference)) + "px"; imageFour.style.height = Math.round(currentHeight + (currentHeight / 100 * percentDifference)) + "px"; imageFive.style.height = Math.round(currentHeight + (currentHeight / 100 * percentDifference)) + "px"; }; $(document).ready(function(){ $('body').append("<style>@media (max-width: 1025px) { .navbar-header { float: none; } .navbar-left, .navbar-right { float: none !important; } .navbar-toggle { display: block; } .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } .navbar-fixed-top { top: 0; border-width: 0 0 1px; } .navbar-collapse.collapse { display: none !important; } .navbar-nav { float: none !important; margin-top: 7.5px; } .navbar-nav > li { float: none; } .navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; } .collapse.in { display: block !important; } .navbar-collapse.in { overflow-y: auto !important; } .navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; box-shadow: none; } .navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header { padding: 5px 15px 5px 25px; } .navbar-inverse .navbar-nav .open .dropdown-menu > li > a { color: #999; } .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus { color: #fff; background-color: transparent; background-image: none; } } </style>"); });    

更新

这很奇怪 - 如果我运行这个

Dim SB As New StringBuilder
        SB.Append("function LinkButtonClick(){ ")
        SB.Append("$get('" & GridViewLBClicked.ClientID & "').click(); ")
                   SB.Append("} ")
        ScriptManager.RegisterStartupScript(Me, Me.GetType(), "LoadLinkButton", SB.ToString,    True)

它不会工作 - 但如果我添加一个警报它运行正常

Dim SB As New StringBuilder
        SB.Append("function LinkButtonClick(){ ")
         SB.Append("$get('" & GridViewLBClicked.ClientID & "').click(); ")
         SB.Append("alert('it was clicked'); ")
                   SB.Append("} ")
        ScriptManager.RegisterStartupScript(Me, Me.GetType(), "LoadLinkButton", SB.ToString, True)

进一步更新

这有效 - 我尝试了 document.ready 但没有 - 不喜欢使用 setTimeout 因为谁知道在野外会发生什么，所以我欢迎一个更强大的解决方案

Private Sub LoadLinkButtonClick()
    Try
        Dim SB As New StringBuilder
        SB.Append("function LinkButtonClick(){ ")
        SB.Append("setTimeout(function() { ")
        SB.Append("$get('" & GridViewLBClicked.ClientID & "').click(); ")
        SB.Append(" }, 300); ")
        SB.Append("} ")
        ScriptManager.RegisterStartupScript(Me, Me.GetType(), "LoadLinkButton", SB.ToString, True)
    Catch ex As Exception
        Dim vError As New SendError
        vError.MailError("1229", PageName, ex)
    End Try
End Sub

Answer 1

您可以尝试通过发送按钮的 UniqueID 来调用 __doPostBack()。

function RaiseEvent_Click() {
     __doPostBack('<%=GridViewLBClicked.UniqueID%>', '');
     alert('It was clicked');
}

编辑:

我尝试了这个代码片段，它工作正常:

<input type="button" id="btnClickMe" value="Click me" />
<asp:UpdatePanel runat="server" ID="uPanel1">
    <ContentTemplate>
        <asp:TextBox runat="server" ID="txtInside"></asp:TextBox>
        <asp:Button runat="server" ID="btnPostInside" />
    </ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
    $("#btnClickMe").on("click", function() {
        $get("<%=btnPostInside.ClientID %>").click();
    });
</script>

您能给我们更多的代码吗？