Событие jQuery click не срабатывает так, как должно - PullRequest
Новая
       4

Событие jQuery click не срабатывает так, как должно

0 голосов
/ 20 октября 2019

Существует отличный пример чата по css-трюкам, который, я думаю, отлично подходит для начинающих в PHP. (https://css -tricks.com / jquery-php-chat / ) Когда я смотрю на это, я замечаю, что кнопки отправки нет. Это очень важно для хорошего пользовательского интерфейса. Поэтому я думаю: «Это не может быть слишком сложно, верно?»и я написал JQuery, чтобы сделать кнопку отправки. Я не получаю никаких ошибок в консоли, но это не отправка. Вы можете посмотреть мою живую демонстрацию внизу. Но я не могу заставить эту кнопку отправки работать. Нажатие Enter посылает данные, так почему бы не нажать кнопку? Там может быть совершенно другой подход, чем то, что я пытаюсь. Например, имитация нажатия клавиши при нажатии кнопки. Но я тоже попробовал, и это не работает правильно. По умолчанию чат постоянно ожидает нажатия клавиши ввода. Это делается с помощью кода ниже. 

$('#sendie').keyup(function(e) {                             
    if (e.keyCode == 13) { 
    //send message
});

И это здорово, но мне нужна кнопка для отправки сообщения. Поэтому я изменил код так: 

$('#sendbutton').click(function(e) {                             
    if (e.keyCode == 13) { 
    //send message
});

Должно ли работать правильно? Нет. Поэтому я попробую еще раз, с другим подходом. Но время от времени jQuery бьет меня в спину. Снова и снова. После моих исследований я думаю, что проблема может заключаться в том, что этот фрагмент находится внутри другой функции, которая выглядит следующим образом: 

$(function() {
 //more code stuffs
  $('#sendie').keyup(function(e) {                           
    if (e.keyCode == 13) { 
    //send message
  });
});

Так что, каким-то образом, он не может найти мою кнопку. И я думаю, что это связано с функцией сдерживания. Может быть, это еще одна проблема. Вся функция состоит из: 

// watch textarea for release of key press
             $('#sendie').keyup(function myFunction(e) {    

                  if (e.keyCode == 13) { 

                    var text = $(this).val();
                    var maxLength = $(this).attr("maxlength");  
                    var length = text.length; 

                    // send 
                    if (length <= maxLength + 1) { 
                        chat.send(text, name);
                        console.log('message was sent by hitting enter. Message: ' + text + "Length: " + length + "."); 
                        $(this).val("");
                    } else {
                        $(this).val(text.substring(0, maxLength));

                    }   
                  }
             });

Вот демонстрация того, что я пытаюсь (без php): 

// ask user for name with popup prompt    
        // it's annoyting for the demo so I got rid of it
        //var name = prompt("Enter your chat name:", "GuestCow");
        
        // default name is 'Guest-Cow'
    	if (!name || name === ' ') {
    	   name = "GuestCow";	
    	}
    	
    	// strip tags
    	name = name.replace(/(<([^>]+)>)/ig,"");
    	
    	// display name on page
    	$("#name-area").html("You are: <span>" + name + "</span>");
        console.log("username is " + name);

        function newName() {
            // ask user for name with popup prompt    
        var name = prompt("Enter your new chat name:", "GuestCow");
        
        // default name is 'Guest-Cow'
        if (!name || name === ' ') {
           name = "GuestCow";   
        }
        
        // strip tags
        name = name.replace(/(<([^>]+)>)/ig,"");
        
        // display name on page
        $("#name-area").html("You are: <span>" + name + "</span>");
        console.log("username was changed to " + name);
        }
    	
    	// kick off chat
        var chat =  new Chat();
    	$(function() {
    	
    		 chat.getState(); 
    		 
    		 // watch textarea for key presses
             $("#sendie").keydown(function(event) {  
             
                 var key = event.which;  
           
                 //all keys including return.  
                 if (key >= 33) {
                   
                     var maxLength = $(this).attr("maxlength");  
                     var length = this.value.length; 
                     console.log("key was pressed");
                     
                     // don't allow new content if length is maxed out
                     if (length >= maxLength) {  
                         event.preventDefault();  
                     }  
                  }  
    		 																																																});
    		 // watch textarea for release of key press
    		 $('#sendie').keyup(function myFunction(e) {	
    		 					 
    			  if (e.keyCode == 13) { 
    			  
                    var text = $(this).val();
    				var maxLength = $(this).attr("maxlength");  
                    var length = text.length; 
                     
                    // send 
                    if (length <= maxLength + 1) { 
                     
    			        chat.send(text, name);
                        console.log('message was sent by hitting enter. Message: ' + text + "Length: " + length + ".");	
    			        $(this).val("");
    			        
                    } else {
                    
    					$(this).val(text.substring(0, maxLength));
    					
    				}	
    				
    				
    			  }
             });

             // watch button for click
             /*$('#sendbutton').click(function(e) {   
                                 
                  
                    var text = $(this).val();
                    var maxLength = $(this).attr("maxlength");  
                    var length = text.length; 
                     
                    // send 
                    if (length <= maxLength + 1) { 
                     
                        chat.send(text, name);
                        console.log('messgae was sent by pressing button');  
                        $(this).val("");
                        
                    } else {
                    
                        $(this).val(text.substring(0, maxLength));
                           
                  }
             });*/

          });
          
          function doOnBlur() {
        document.getElementById("sendie").style.borderBottom = "2px solid rgb(169, 169, 169)";
        document.getElementById('progressinner').style.width = "0px";
    }

    function doOnFocus() {
        document.getElementById("sendie").style.borderBottom = "none";
        document.getElementById('progressinner').style.width = "360px";
    }
    
    //ajax
    /* 
Created by: Kenrick Beckett

Name: Chat Engine
*/

var instanse = false;
var state;
var mes;
var file;

function Chat () {
    this.update = updateChat;
    this.send = sendChat;
	this.getState = getStateOfChat;
}

//gets the state of the chat
function getStateOfChat(){
	if(!instanse){
		 instanse = true;
		 $.ajax({
			   type: "POST",
			   url: "process.php",
			   data: {  
			   			'function': 'getState',
						'file': file
						},
			   dataType: "json",
			
			   success: function(data){
				   state = data.state;
				   instanse = false;
			   },
			});
	}	 
}

//Updates the chat
function updateChat(){
	 if(!instanse){
		 instanse = true;
	     $.ajax({
			   type: "POST",
			   url: "process.php",
			   data: {  
			   			'function': 'update',
						'state': state,
						'file': file
						},
			   dataType: "json",
			   success: function(data){
				   if(data.text){
						for (var i = 0; i < data.text.length; i++) {
                            $('#chat-area').append($("<p>"+ data.text[i] +"</p>"));
                            document.title = "Chat - 1 new message";
                        }								  
				   }
				   document.getElementById('chat-area').scrollTop = document.getElementById('chat-area').scrollHeight;
				   instanse = false;
				   state = data.state;
			   },
			});
	 }
	 else {
		 setTimeout(updateChat, 1500);
	 }
}

//send the message
function sendChat(message, nickname)
{       
    updateChat();
     $.ajax({
		   type: "POST",
		   url: "process.php",
		   data: {  
		   			'function': 'send',
					'message': message,
					'nickname': nickname,
					'file': file
				 },
		   dataType: "json",
		   success: function(data){
			   updateChat();
		   },
		});
}
*                               { margin: 0; padding: 0; outline: 0px !important; }
body                            { font: 12px "Lucida Grande", Sans-Serif; background: #333; }
#page-wrap                      { width: 500px; margin: 5px auto; position: relative; border-radius: 10px; }

.darkMode                       { width: 500px; margin: 5px auto; position: relative; }

#chat-wrap                      { margin: 0 0 15px 0; }
#chat-area                      { height: 300px; overflow-y: auto; overflow-wrap: break-word; border: 1px solid #666; border-radius: 10px; padding: 20px; background: white; }
#chat-area span                 { color: white; background: #333; padding: 4px 8px; -moz-border-radius: 5px; -webkit-border-radius: 8px; margin: 0 5px 0 0; }
#chat-area p                    { padding: 8px 0; border-bottom: 1px solid #ccc; line-height: 1.5;}

/*#name-area                      { position: absolute; top: 5px; right: 0; color: white; font: bold 12px "Lucida Grande", Sans-Serif; text-align: right; }   
#name-area span                 { color: #fa9f00; }*/
#modbox							{ background-color: red !important; color: white; background: #333; padding: 4px 8px; -moz-border-radius: 5px; -webkit-border-radius: 8px; margin: 0 5px 0 0; }

#send-message-area p            { float: left; color: white; font-size: 14px; }
#sendie                         { z-index: 1000000; outline: 0 !important; resize: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;color: white; background-color: #333; width: 360px; padding: 5px; font: 13px "Lucida Grande", Sans-Serif; box-sizing: border-box; border-bottom: 2px solid rgb(169, 169, 169); float: right; }

/*New Css----Turns out it's broken... :(  */
#chat-area::-webkit-scrollbar {
            width: 1em;
        }
        
#chat-area::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            border-left: 2px solid #3a3a3a;
        }
        
#chat-area::-webkit-scrollbar-thumb {
            background-color: #333;
            outline: 1px solid slategrey;
        }
        
#chat-area::-webkit-scrollbar-thumb:hover {
            background-color: #3a3a3a;
        }

        /* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 17px;
  float: left;
  top: 0px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(13px);
  -ms-transform: translateX(13px);
  transform: translateX(13px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

#menu { display: none; }

.sendbuttoncontainer {
  width: 100px;
  text-align: center;
  margin: 0px;
  padding: 0px;
}

.textareacontain {
  margin: 0px;
  padding: 0px;
  border: none;
  overflow: hidden;
  text-align: center;
  float: right;
}

.progressinner {
  width: 0px;
  height: 2px;
  /*nice google blue color*/
  background-color: #4885ed;
  position: absolute;
  margin-top: 44px;
  -webkit-transition-duration: 0.4s; 
       -o-transition-duration: 0.4s; 
          transition-duration: 0.4s;
}

/*#sendie:focus + .progressinner {
  width: 100%;
}*/

#sendbutton {
  border: 2px solid lightgrey;
  background-color: #333;
  border-radius: 30px;
  width: 60px;
  color: lightgrey;
  margin-top: 5px;
  outline: 0px !important;
  -webkit-transition-duration: 0.4s; 
       -o-transition-duration: 0.4s; 
          transition-duration: 0.4s;
}

#sendbutton:active {
  outline: 0px !important;
}

#sendbutton:hover {
  background-color: #f22a02;
  width: 75px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body onload="setInterval('chat.update()', 1000)" onclick="document.getElementById('menu').style.display = 'none';">


<div class="darkMode" style="
 -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -o-user-select: none;
            user-select: none;">
   <label class="switch">
  <input class="checker" onclick="javascript: (
function () { 
    var css = 'html {-webkit-filter: invert(100%);' +
        '-moz-filter: invert(100%);' + 
        '-o-filter: invert(100%);' + 
        '-ms-filter: invert(100%); }' +
        '#modbox {background-color: #00FFFF;}',
    head = document.getElementsByTagName('head')[0],
    style = document.createElement('style');

if (!window.counter) { window.counter = 1;} else  { window.counter ++;
    console.log('darkmode activated');
if (window.counter % 2 == 0) { var css ='html {-webkit-filter: invert(0%); -moz-filter: invert(0%); -o-filter: invert(0%); -ms-filter: invert(0%); } #modbox {background-color: red;}'}
 };

style.type = 'text/css';
if (style.styleSheet){
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

head.appendChild(style);
 }());
" type="checkbox" title="Dark Mode">
  <span class="slider round"></span>
</label>
<p style="
            float: left; color: white;
 -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -o-user-select: none;
            user-select: none;" id="noInvertTwo">&nbsp;&nbsp;Dark Mode On/Off</p><p style="float: right;"><a href="javascript:newName();" style="color: lightgrey;">Change Username</a> <a href="javascript:window.close();" style="color: lightgrey;">Close Chat</a></p>
</div>
<br style="
 -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -o-user-select: none;
            user-select: none;">

    <div id="page-wrap">
    
        
        


        
        <div id="chat-wrap"><div id="chat-area" class="chat-area">
            <p style=""><span2 id="modbox">Chat-Mod</span2>Basically, pressing the send button, while it's supposed to send somthing, is doing nothing. Please note that this demo does not work because it does not have the php nessacarry for it to.</p>
            <p style=""><span>Details</span>Ignore the DOM styleing errors in the console. Mainly, I think that my problem is with some global variables not really being so global after all. I'm having a hard time identifying this error. But I will even accept another solution to submit the content to that chat that uses a button press.</p><!--<p id="name-area"></p>-->
        </div></div>
        
        <form id="send-message-area">
            <p id="noInvert">Your message: </p><!--<br><button onclick="sendText()">send</button>-->
            <div class="textareacontain">
                <textarea tabindex="2" id="sendie" onfocus="doOnFocus()" onblur="doOnBlur()" maxlength="200" placeholder="Say Something... (Press Enter to Send)"></textarea>
                <div class="progressinner" id="progressinner"></div>
            </div><br>
            </form>
            <div class="sendbuttoncontainer">
                <button id="sendbutton" onclick="sendthetext();">Send&#9721;</button>
            </div>
        
    
    </div>

</body>

В любом случае, простите за длинное объяснение. И я уверен, что просто скучаю по чему-то очень простому для всех остальныхТак что, если бы у меня был еще один взгляд на мой код, я был бы признателен. Заранее спасибо.

Ответы [ 2 ]

1 голос
/ 20 октября 2019

Проверка кода ключа относится только к событию клавиатуры, которое было зафиксировано #sendie textarea. При нажатии кнопки код клавиатуры не отображается вообще.

Просто удалите условие if-key и все будет в порядке.

0 голосов
/ 20 октября 2019

Благодаря @ Коала Йенгу я сформировал ответ. Коала сказал, что, поскольку событие click не содержит ключевой код, моя функция не была запущена. Поэтому я удалил строку if (e.keyCode == 13{}, однако функция все еще не выполнялась. Поэтому я провел некоторое исследование по проверке ошибок. И один хороший способ, который я нашел, - это поместить console.log(''); в места, где может быть запущена функция или оператор if / else. Тогда моя первоначальная функция выглядела так: 

// watch button for click
             $('#sendbutton').click(function(e) {  

                    console.log("it got this far at least");

                    var text = $(self).val();
                    var maxLength = $(self).attr("maxlength");  
                    var length = text.length; 

                    // send 
                    if (length <= maxLength + 1) { 

                        console.log("passed maxlenght test");

                        chat.send(text, name);
                        console.log('message was sent by Pressing Send. Message: ' + text + " Length: " + length + "."); 
                        //clears the textarea after send
                        $(self).val("");

                    } else {
                        console.log('did not pass maxlength test')
                        $(self).val(text.substring(0, maxLength));
                    }   

             });

Тогда, если бы я получил it got this far at least, я бы знал, что она получила нажатие кнопки. После этого я получил строку did not pass maxlength test, что означает, что он запускает else после оператора if, хотя я хотел, чтобы он выполнял сам оператор if. Именно тогда я понял, что пытался проверить максимальную собственную собственность. Но у кнопки нет атрибута maxlength! Поэтому я заменил все свои свойства на '#sendie', и это сработало! Это действительно сработало. И это редкость для моего навыка javascript. И это также хорошо для проверки ошибок. Я кое-что узнал сегодня. И я так благодарен за это.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...