eventlistener funktioniert nicht

T

TheGateway

Mitglied
Hallo,

ich arbeite mit .dialog und habe 2 Dialogs erstellt. Das erste lade ich mit


JS datei
Javascript: 
$("#sendChatText").keyup(function(event){
    if(event.keyCode == 13){
       alert("funktioniert");
    }
});

Javascript: 
$( "#div" ).dialog({containment: "parent", height: "510", width: "650", resizable: false});
$("#div").load("start.php"); // start.php beinhaltet js datei und textarea #sendChatText

das zweite dialog rufe ich so auf:

Code: 
//beinhaltet ebenfalls JS datei
var div2 = $("<div id=\"chatdiv\"><textarea id=\"sendChatTextPrivat\" type=\"text\" onclick=\"\"></textarea></div>")
      
      
            .dialog({
                containment: "parent",
                height: "420",
                width: "605",
                position: {at: "center+40 center-10", of: window},
                resizable: false,
                close: function (ev, ui) {
                  
                    $(this).dialog("destroy");
                    $(this).remove();
  
                }
            }); 
        return div2;

im ersten dialog funktionert es wenn ich enter drücke in der Textarea im 2 Dialog nicht... weis jemand worans liegen könnte?

funktioniert beim zweiten leider auch nicht
Javascript: 
document.querySelector('#sendChatTextPrivat').addEventListener('keypress', function (e) {
    var key = e.which || e.keyCode;
    if (key === 13) { // 13 is enter
      alert("enter");// code for enter
    }

liegt es daran das ich dialog 2 erst generiere?, das es erst funktionieren kann wenn ich es bereits generiert habe ist mir bewusst. dialog 1 besteht aus einer festen datei, könnte es daran liegen?
 
1. Bei diesen Codeschnipseln steige ich nicht durch. Man müsste das Ganze im Zusammenhang und in Aktion sehen.
2.
das es erst funktionieren kann wenn ich es bereits generiert habe ist mir bewusst.
Zum Vergrößern anklicken....
Das trifft zu. Außerdem kann ein Eventlistener erst dann registriert werden, wenn das entspr. Element vorhanden ist.
3.
start.php beinhaltet js datei und textarea #sendChatText
Zum Vergrößern anklicken....
Es ist immer eine Quelle von Verwirrung und Fehlern, wenn JS-Dateien nachgeladen werden. Man müsste in diesem Fall erst recherchieren, ob JS-Code bei jQuery-load überhaupt ausgeführt wird. Besser das Javascript getrennt mit jQuery.getScript() laden, dann weiß man, dass es ausgeführt wird und wann. Oder die JS-Datei gleich im Mutterdokument laden und nach dem $.load im success-Callback die Eventlistener registrieren.
 
Hi,

laut API-Doku von jQuery ist die Script-Ausführung möglich, solang keine suffixed selector expression verwendet wird (suffixed selector expression = es wird nur ein Teil des angeforderten Dokuments verwendet).

Ein Konstrukt wie folgt, solle funktionieren:

HTML-File:
HTML: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tutorials.de</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
    $('#elem').load('jquery_load.php');
});
</script>
</head>
<body>
    <div id="elem"></div>
</body>
</html>

jquery_load.php
PHP: 
<script src="jquery_load_script.js"></script>

jquery_load_script.js:
Code: 
$("<div id=\"chatdiv\"><textarea id=\"sendChatTextPrivat\" type=\"text\" onclick=\"\"></textarea></div>")
    .dialog({
        containment: "parent",
        height: "420",
        width: "605",
        position: {at: "center+40 center-10", of: window},
        resizable: false,
        close: function (ev, ui) {

            $(this).dialog("destroy");
            $(this).remove();

        }
    });

$("#sendChatTextPrivat").on('keyup', function(event){
    if(event.keyCode == 13){
       console.log("funktioniert");
    }
});

Vielleicht hilft dir das weiter.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück