Keypress功能在javascript var中不起作用

时间:2016-06-07 04:08:54

标签: javascript jquery

所以大家好,我有一个用户列表边栏和一个聊天框。 侧边栏会附加聊天框并执行此操作,我需要将聊天框放在javascript变量中。然后这是问题

当我只插入这样的聊天框时:

<div class="shout_box">
<div class="header">Chat-Box<div class="close_btn">&nbsp;</div></div>
    <div class="toggle_chat">
        <div class="message_box">
        </div>
        <div class="user_info">
            <input name="shout_username" id="shout_username" type="text" placeholder="Your Name" maxlength="15" />
            <input name="shout_message" id="shout_message" type="text" placeholder="Type Message Hit Enter" maxlength="100" /> 
        </div>
    </div>
</div>

可以运行javascript函数

但是当我将聊天框放入此javascript变量

时,它无法正常工作
var element = '<div class="shout_box"><div class="header">Chat-Box<div class="close_btn">&nbsp;</div></div><div class="toggle_chat"><div class="message_box"></div><div class="user_info"><input name="shout_username" id="shout_username" type="text" placeholder="Your Name" maxlength="15" /><input name="shout_message" id="shout_message" type="text" placeholder="Type Message Hit Enter" maxlength="100" /> </div></div></div>';

这是javascript函数:

// load messages every 1000 milliseconds from server.
load_data = {'fetch':1};
window.setInterval(function(){
 $.post('shout.php', load_data,  function(data) {
    $('.message_box').html(data);
    var scrolltoh = $('.message_box')[0].scrollHeight;
    $('.message_box').scrollTop(scrolltoh);
 });
}, 1000);

//method to trigger when user hits enter key
$("#shout_message").keypress(function(evt) {
    if(evt.which == 13) {
            var iusername = $('#shout_username').val();
            var imessage = $('#shout_message').val();
            post_data = {'username':iusername, 'message':imessage};

            //send data to "shout.php" using jQuery $.post()
            $.post('shout.php', post_data, function(data) {

                //append data into messagebox with jQuery fade effect!
                $(data).hide().appendTo('.message_box').fadeIn();

                //keep scrolled to bottom of chat!
                var scrolltoh = $('.message_box')[0].scrollHeight;
                $('.message_box').scrollTop(scrolltoh);

                //reset value of message box
                $('#shout_message').val('');

            }).fail(function(err) { 

            //alert HTTP server error
            alert(err.statusText); 
            });
        }
});
有人可以告诉我这个问题吗? 感谢

0 个答案:

没有答案