Question

过程是：点击.post-thread后，它会通过集线器调用服务器，返回<p data-id = id class = 'take-thread'>，然后附加foo div。然后我点击<p>，它应该在服务器端运行TakeThread。

但是，当我点击新添加的<p>时，console.log('test')并未触发，直到我在星形矩形中添加了代码。我不明白为什么。 Hub.start().done()中已有一个侦听器触发点击。为什么我必须在集线器客户端功能中执行此操作？

JS：

var chat = $.connection.chatHub;
chat.client.updateThings(id){
   $('.foo').append('<p data-id = "id" class = "take-thread"></p>');

   // Why do I need to these code below?  
   ************************************************  
   * $('.take-thread').on('click', function () {  *
   *     console.log("test");                     *   
   *     chat.server.takeThread("blah...");       * 
   * });                                          * 
   ************************************************

}

$.connection.hub.start().done(function () {
    $('.post-thread').on('click', function () {
        chat.server.postThread("Test"); // works
    });
    $('.take-thread').on('click', function () {
        console.log("test");
        chat.server.takeThread("blah..."); 
    });
}

C＃Hub：

public void PostThread(string title) {
    var id = someCalculation();
    Clients.All.updateThings(id);
}

public void TakeThread(string title) {
    // do things
}

Answer 1

这是一个绑定问题。调用document.ready后添加到页面的动态元素不会自动反弹。这是您在点击事件中添加第二个事件到updateThings函数时所做的事情。

你需要我们.on()使用document.ready（.foo）上的静态parentSelector以及SignalR回调添加的动态元素的选择器（.take-thread ）。

使用标准警报代替SignalR查看此示例：http://jsfiddle.net/kspearrin/0zyoqyxL/

最后，您的Javascript应更新为以下内容：

var chat = $.connection.chatHub;
chat.client.updateThings(id){
   $('.foo').append('<p data-id="id" class="take-thread"></p>');
}

$.connection.hub.start().done(function () {
    $('.post-thread').on('click', function () {
        chat.server.postThread("Test"); // works
    });

    $('.foo').on('click', '.take-thread', function () {
        console.log("test");
        chat.server.takeThread("blah..."); 
    });
}

信号器客户端不会触发点击监听器

1 个答案: