Question

我在屏幕上有这个小部件，它根据某些服务器端更改其中包含的数据以及它的类，并响应鼠标点击它。我正在使用SignalR同时通知多个客户端更新。我遇到的问题是我已将所有内容（包括标记）放在更新面板中（否则我必须每次都回发整个页面，这是一个非常糟糕的用户体验）并且在第一次回发后我的图片带有“ iconThing“ID不再对按钮点击做出反应。

我使用的原始点击功能是

$("#iconThing").click(function () {
    $(this).parent(".activity-pad").toggleClass("hidden-pad");});

在浏览了各种在线资源和堆栈溢出后，我偶然发现SignalR Update Panel Only Works First Time理论上应该解决我的问题 - 除了我添加的新代码不再响应点击的事实在所有（我打赌它是相当解释的东西，但我对javascript和jquery相当新，所以帮助将不仅仅是赞赏）

 $(document).on("click", "#iconThing", function(){
        $(this).parent(".activity-pad").toggleClass("hidden-pad");});

标记本身是（PadColorSetter是一个服务器端字符串，输出基于该字符串。它已经过测试并且正在工作（视觉效果会按预期发生变化），它只是看起来会自杀的onclick功能）

    <asp:UpdatePanel runat="server" id="upActivityPadModule" IsUpdatePanel="true">
        <ContentTemplate>
<div class="activity-pad hidden-pad">
  <div class="icon <%# PadColorSetter %>" id="iconThing">
    Activity Pad
  </div>
  <div class="top <%# PadColorSetter %>">
  </div>
  <div class="middle <%# PadColorSetter %>">
    <div class="middle-content">
     <script type="text/javascript">
     // SignalR
     $(function () {
     // Declare a proxy to reference the hub.
     var padUpdater = $.connection.activityPadHub;
     //$.connection.hub.start();

     // Create a function that the hub can call to broadcast messages.
     padUpdater.client.ActivityPadRefresh = function () {

     __doPostBack('<%= upActivityPadModule.ClientID %>', '');
     };

     // Start the connection.
     $.connection.hub.start().done(function () {
     // Call the ActivityPadRefresh method on the hub.
     padUpdater.server.ActivityPadRefresh();
     });
     });
</script>

    </div>
  </div>
  <div class="bottom <%# PadColorSetter %>">
  </div>
</div>
        </ContentTemplate>
      </asp:UpdatePanel>

编辑：

$("#iconThing").bind("click", function () {

而不是

$(document).on("click", "#iconThing", function(){

似乎对点击做出反应。不幸的是，只有在回发完成之前。

Answer 1

如果其他人正在努力解决同样的问题，那么救了我的是：

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
    $("#iconThing").bind("click", function () {
        //$("#iconThing").click(function () {
        $(this).parent(".activity-pad").toggleClass("hidden-pad");
    });
});

SignalR回发导致jQuery操作停止工作

1 个答案: