Javascript Jquery文本未解析为变量_Javascript_Jquery

Javascript Jquery文本未解析为变量

javascript jquery

Javascript Jquery文本未解析为变量,javascript,jquery,Javascript,Jquery,我有一个代码，希望按钮的文本存储在变量中，然后将文本字段的值设置为文本。以下是button onclick事件的代码： $('#MyButton').click(function(){ var user1 = $(this).attr("value"); $('#MyTextField').val(user1); }); 这是我的按钮和文本字段： <input type="text" class="form-control" id="MyTextF

我有一个代码，希望按钮的文本存储在变量中，然后将文本字段的值设置为文本。以下是button onclick事件的代码：

$('#MyButton').click(function(){
        var user1 = $(this).attr("value");
        $('#MyTextField').val(user1);
    });

这是我的按钮和文本字段：

<input type="text" class="form-control" id="MyTextField" aria-label="..." placeholder="User to send to">
 <button id="MyButton" class="btn btn-success" value="Go!">GO</button>

去

但什么也没有发生。请帮忙，提前谢谢

关于@Drakes的编辑

<script type="text/javascript">
var socket = io.connect('http://192.168.2.18:8080');
$(window).load(function(){
    username = "<%= user.local.email %>";
    console.log(username);
    socket.emit('join', username);
    socket.on('userjoino', function(data){
        $('#users').empty();
        $('#puser').empty();
        $.each(data, function(key, value){
            $('#users').append('<div class="alert alert-warning">'+key+'</div>');
            $('#puser').append('<li class="list-group-item" id="whisper" rec="'+key+'"> <button id="whisper" class="btn btn-success MyButton" value="'+ key + '">'+ key + '</button></li>');
        });
        var users = data;
        console.log(users);
    });
    $('form').submit(function(e){
        e.preventDefault();
        var message = $('#msg').val();
        if(message.length <= 0){
            $('#boxf').append('<div class="alert alert-danger">Message cannot be left empty</div>');
            var div = document.getElementById("boxf");
            div.scrollTop = div.scrollHeight;
        }else{
        //var msgob = [nickname + ': ' + message];
        //socket.emit('message', msgob);
        socket.emit('message', message);
        $('#boxf').append('<div class="alert alert-info"> Me: ' + message + '</div>' );
        var div = document.getElementById("boxf");
        div.scrollTop = div.scrollHeight;

        $('#msg').val('');
        }
  });
    socket.on('messages', function(data){
        $("#boxf").append('<div class="alert alert-info" >' + data + "</div>");
        var div = document.getElementById("boxf");
        div.scrollTop = div.scrollHeight;
        //document.getElementById('xyz').play();
    });
    socket.on('disuser', function(data){
        $("#boxf").append('<div class="alert alert-info">Server: ' +data+" has left the chat" + "</div>");
        var div = document.getElementById("boxf");
        div.scrollTop = div.scrollHeight;
    });

    $('#pm').click(function(e){
        var whisp = $('#whisp').val();
        var recipent = $('#recipent').val();
        console.log(recipent);
        socket.emit('whisper', {whisp: whisp, user: recipent});
        $('#whisp').val('');
        $('#recipent').val('');
        return false;
    });
    $('#whiisper').on('click', '.MyButton', function(){
        var user1 = $(this).val();
        $('#recipent').val(user1);
    });
    console.log('hey');
    socket.on('whisper', function(data){
        console.log(data);
        if(data.user === username){
            $('#messes').append('<div class="alert alert-info" >' + data.user + ': ' + data.whisp + "</div>");
        }else{
            console.log('ahaaaaahhh');
        }
    });

});
</script>


var socket=io.connect（'http://192.168.2.18:8080');
$（窗口）。加载（函数（）{
用户名=”；
console.log（用户名）；
emit（'join'，用户名）；
socket.on（'userjoino'，函数（数据）{
$（'#users'）.empty（）；
$（'#puser'）.empty（）；
$。每个（数据、函数（键、值）{
$（“#用户”）.append（“”+key+“”）；
$（“#puser”）.append（““+key+””）；
});
var用户=数据；
console.log（用户）；
});
$（'form'）。提交（函数（e）{
e、 预防默认值（）；
var message=$（'#msg'）.val（）；
如果（message.length您发布的代码正在使用此脚手架。单击“GO”按钮时，“GO！”将显示在文本输入中。请确保包含jQuery，并且在页面加载后不会动态创建MyButton按钮
<html>
<head>

<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>

<script type='text/javascript'>
$(window).load(function(){
    $('#MyButton').click(function(){
        var user1 = $(this).attr("value");
        $('#MyTextField').val(user1);
    });
}); 

</script>

</head>
<body>
  <input type="text" class="form-control" id="MyTextField" aria-label="..." placeholder="User to send to">
  <button id="MyButton" class="btn btn-success" value="Go!">GO</button>
</body>
</html>


$（窗口）。加载（函数（）{
$（“#MyButton”）。单击（函数（）{
var user1=$（this.attr（“value”）；
$（'#MyTextField'）.val（user1）；
});
}); 
去
要处理动态添加元素的事件，可以使用事件委派。您需要将事件绑定到从一开始就存在的包含元素
如果您有多个元素，那么id无法识别它们，因为它必须是唯一的，您可以使用类来代替
要查找输入元素，需要遍历DOM以查找按钮旁边的元素
例如：
$('#ButtonContainer').on('click', '.MyButton', function(){
    var user1 = $(this).val();
    $(this).prev().val(user1);
});

确保按钮具有可用于识别它们的类。例如：
<div id="ButtonContainer">
  <input type="text" class="form-control" aria-label="..." placeholder="User to send to">
  <button class="MyButton btn btn-success" value="Go!">GO</button>
  <input type="text" class="form-control" aria-label="..." placeholder="User to send to">
  <button class="MyButton btn btn-success" value="Go!">GO</button>
  <input type="text" class="form-control" aria-label="..." placeholder="User to send to">
  <button class="MyButton btn btn-success" value="Go!">GO</button>
</div>


去
去
去

演示，使用动态添加的元素：

$（'ButtonContainer'）。在（'click'，'MyButton'，函数（）上{
var user1=$（this.val（）；
$（this.prev（）.val（user1）；
});
$（'#ButtonContainer'）。追加（'GO'）；
$（'#ButtonContainer'）。追加（'GO'）；
$（'#ButtonContainer'）。追加（'GO'）；

尝试使用$（'#MyButton'）。在（'click'，function（）{..}
在这里工作：。可能您的页面中没有包含jQuery
？JS代码放在哪里？确保它在文档中。ready@SaiAshwin您需要更具体地了解哪些东西在小提琴中不起作用，当您单击按钮时，Go！
值被设置为输入！顺便说一句，您有。#sper'
而不是”#whisper'
如果这很重要我检查了一切…它仍然不工作！因此，您可以在您的html文件中尝试此代码，以验证它是否符合您的要求吗？然后我们可以快速探索更多的故障点，这是有效的！您何时何地执行$（“#MyButton”）。单击（功能（）…code？你能发布那一部分吗？你能到这把小提琴前，验证Go按钮是否在做你希望它做的事情吗？奇怪…它在我的机器上不起作用…但是如果我粘贴你所做的确切代码…它就起作用了！！@SaiAshwin：验证代码片段在你的机器上起作用。检查它们之间的差异代码，例如类的使用。类、aria标签和类型、占位符是否必须按某种顺序排列？这是我的代码的唯一方式different@SaiAshwin：不，属性顺序不重要。请检查您是否没有双类属性，这一个几乎可以理解我。没有双类属性@Guffa
<div id="ButtonContainer">
  <input type="text" class="form-control" aria-label="..." placeholder="User to send to">
  <button class="MyButton btn btn-success" value="Go!">GO</button>
  <input type="text" class="form-control" aria-label="..." placeholder="User to send to">
  <button class="MyButton btn btn-success" value="Go!">GO</button>
  <input type="text" class="form-control" aria-label="..." placeholder="User to send to">
  <button class="MyButton btn btn-success" value="Go!">GO</button>
</div>