Question

有人可以向我解释为什么当我通过jQuery添加按钮时

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

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

当我点击它时它不起作用，我实际上是用它来与socket进行交互所以当我点击它时，我想对我的套接字服务器说些什么，但点击按钮就什么都不做了！

为什么我们不能按下按钮？也许是因为在使用这种方法时他没有出现在源代码中（右键单击）？

编辑我的示例代码：

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

client.js

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

这里套接字服务器发送按钮到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()代理

进行委派

$("#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"
    });
});

jQuery .html无法点击按钮

3 个答案: