jQuery .html a按钮无法被点击

Question

有人能解释一下为什么我用jQuery添加一个按钮吗？

$("#foo").html("<button id='hello'>Hello</button>");

我实际上已经尝试过.on，.load，但没有改变任何东西...

当我点击它时，他不工作，我实际上是用它来与套接字交互，所以当我点击它时，它应该会对我的套接字服务器说些什么，但点击按钮什么也不做！

为什么我们不能按下按钮？可能是因为他在使用这个方法的时候没有出现在源代码中(点击右键)？

编辑我的示例代码：

socket.emit('setContainer', "<button id='hello'>Hello</button>");

client.js

socket.on('setContainer', function(data)    {
    $('#container').html(data); 
});

在这里socket服务器发送按钮到html，当我按下这个按钮时，它应该启动简单的console.log事件

$('#essai').on("click", function() {
    console.log('123');
    //start answer to socket but button doesn't work
    socket.emit('helloBack', "123");
});

但是我不知道为什么这里的按钮没有任何效果，当我们点击它的时候，就像按钮被锁定了一样(当我点击按钮的时候，我看不到点击的效果)

Answer 1

动态添加按钮时，需要直接在其上附加事件处理程序

​

var button = $('<button id="hello">Hello</button>');
button.click(function() {
  console.log('hello');
});
$("#foo").html(button);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="foo"></div>

​

使用on() like委托的或

​

$("#foo").html("<button id='hello'>Hello</button>");
$(document).on('click', 'button', function(){
  console.log('hello');
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="foo"></div>

​

Answer 2

您应该使用.delegate()方法将处理程序附加到还不在DOM中的节点。

Answer 3

好了，我的问题已经解决了，下面是解决方案：(示例) foo是包含由jQuery添加的#hello按钮id的div

$('#foo').on('click', '#hello', function() {
    socket.emit('helloBack', {
        response:   "hello"
    });
});