Onclick事件工作不正常.node.js中的

Onclick event are not working properly

本文关键字：js 中的 node 不正常 事件 工作 Onclick      更新时间：2023-09-26

点击事件不起作用，而是简单的文本输入。我希望当你点击按钮（在我的例子中是两个按钮）时，会发生两个不同的事件，但它不起作用。这两个不同的事件是页面中的appendDOM。其中一个按钮有值"X"，另一个有值"O"，我只想用按钮的值附加DOM。我该怎么做？这是代码--->

我的脚本是-

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

in Body标记-

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

在底部，我想要两个按钮来代替表单，它们可以在默认的固定值下操作。

在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
});
相关文章：