Question

在node.js中的click事件不起作用但是简单的文本输入work.i想要当你点击按钮（在我的情况下是两个按钮）时，两个不同的事件发生但它不起作用。这两个不同的事件是在页面中追加DOM。其中一个按钮的值为'X'，另一个按钮的值为'O'，我只想用按钮的值附加DOM。我怎样才能做到这一点？这是代码---＆gt;

我的剧本是 -

        $(function() {


            var socket = io.connect(window.location.href);


            socket.on('message:server', function(data) {
                $("#messages").append(
                    '<li style="color:red">' +
                    data.message + ' - ' + 'received' + ' ' + new Date() +
                    '</li>'
                );
            });


            $("#message_form").on('submit', function(event) {


                event.preventDefault();


                var $input = $('[name="message"]')
                var message = $input.val();


                if (message) {
                    socket.emit('message:client', {message: message});
                }


                $("#messages").append(
                    '<li style="color:green">' + 
                    message + ' - ' + 'sent' + ' ' + new Date() +
                    '</li>'
                );


                $input.val('');
            });


            socket.on('error', function() {
                console.error(arguments)
            });
        });

身体标签中的

-

    <form id="message_form" method="post">
        <input name="message" placeholder="Message to send" type="text"/>
        <button type="submit">Submit</button>
    </form>

这里在底部代替表格我想要2个按钮，可以使用默认给定的固定值来操作它。

Answer 1

如何在DOM中创建两个按钮并调用.on('click', function(){})而不是submit？

Like :

<button id="value1">Send value 1</button>
<button id="value2">Send value 2</button>

然后，您只需在click事件上设置该功能。我在您的代码中添加了注释，以显示您可以删除的内容：

$("#value1").on('click', function(event) {

  event.preventDefault();

  // var $input = $('[name="message"]');
  // You don't need fix since you send "fixed" value
  var message = "Value 1" // Or whatever you want instead of $input.val();

  // if (message) {
  // No need of condition since you set the value
  socket.emit('message:client', {message: message});
  // }

  $("#messages").append(
    '<li style="color:green">' + 
    message + ' - ' + 'sent' + ' ' + new Date() +
    '</li>'
  );

  // $input.val('');
});

您只需为按钮2执行相同的操作。对于此示例，您可以调用：

$('#value2').on('click', function(){ 
  // Same as value with another message value
});

Onclick事件无法正常工作

1 个答案: