Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] Per JS eingefügte Elemente können nicht angesprochen werden

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [Erledigt] Per JS eingefügte Elemente können nicht angesprochen werden

    Hallo,

    ich baue grad ein Skript um leicht MySQL-Tabellen zu erstellen.

    Die Spalten mit ihren definitionen werden in zeilen einer TABLE definiert. Per button kann man zeilen einfügen/entfernen um so die anzahl der Spalten zu bestimmen. Dann wird per jQ ein TR Objekt hinzugefügt bzw. entfernt. In diesen TRs werden TDs generiert die alle eine unterschiedliche ID haben (die id wird aus der anzahl der bisherigen TRs + 1 errechnet.

    Wenn ich die query generieren will, durchlaufe ich eine forschleife die von 1 bis zur anzahl der TRs ( - 1 wegen einer kopfzeile) zählt. Dadurch werden für jede Zeile die Inputfelder ermittelt und die Query zusammengebaut.

    Aber die per jQ hinzugefügten Inputfelder werden bei den EventHandlern nicht berücksichtigt. D.H. wenn ich dort text eingebe passiert nichts. Liegt dass möglicherweise daran, dass $(document).ready() nur für die inputfelder eventhandler registriert, die beim aufbau der seite vorhanden sind?

    PHP-Code:
    <head>
        <
    script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>    
        <script>
            function insert_row(){
                var num = $("table tr").length;
                var html = '<tr>';
                html += '<td class="id">' + num + '</td>';
                html += '<td><input type="text" id="name_' + num + '" /></td>';
                html += '<td><input type="text" id="type_' + num + '" /></td>';
                html += '<td><input type="number" id="length_' + num + '" /></td>';
                html += '<td><input type="text" id="values_' + num + '" /></td>';
                html += '<td><input type="checkbox" id="null_' + num + '" /></td>';
                html += '<td><input type="text" id="default_' + num + '" /></td>';
                html += '<td><input type="text" id="extra_' + num + '" /></td>';
                html += '<td><input type="checkbox" id="unique_' + num + '" /></td>';
                html += '<td><input type="checkbox" id="primary_' + num + '" /></td>';
                html += '</tr>';
                
                $("table tr:last").after(html);
                
                query();
            }
            
            function delete_row(){
                if(!($("table tr:last").is("table tr:eq(2)"))){
                    $("table tr:last").remove();
                    query();
                }
            }
            
            function check_table_name(){
                
            }
            
            function query(){
                //alert($("table tr").length - 1);
                if(!($("#name").val() == "")){
                    
                    var query = "CREATE TABLE `" + $("#name").val() + "` (";
                    var primary = "";
                    
                    for(var i = 1; i <= $("table tr").length - 1; i++){
                        if($("#name_" + i).val() != "" && $("#type_" + i).val() != ""){
                            
                            query += "<br>`" + $("#name_" + i).val() + "` ";
                            query += $("#type_" + i).val();
                            if($("#length_" + i).val() > 0){
                                query += "(" + $("#length_" + i).val() + ")";
                            }
                            if(!$("#null_" + i).prop("checked")){
                                query += " NOT NULL";
                            }
                            if($("#default_" + i).val() != ""){
                                query += " DEFAULT " + $("#default_" + i).val();
                            }
                            if($("#extra_" + i).val() != ""){
                                query += " " + $("#extra_" + i).val();
                            }
                            if($("#unique_" + i).prop("checked")){
                                query += " UNIQUE KEY";
                            }
                            
                            if(i < $("table tr").length - 1) query += ",";
                            
                            if($("#primary_" + i).prop("checked")){
                                if(primary == ""){
                                    primary += "(";
                                }else{
                                    primary += ", ";
                                }
                                primary += "`" + $("#name_" + i).val() + "`";
                            }
                        }
                    }
                    if(primary != "") query += ",<br>PRIMARY KEY " + primary + ")";
                    query += "<br>)";
                    
                    $("#query").html(query);
                    
                }
            }
            
            $(document).ready(function(){
                $("#name").keyup(function(){
                    check_table_name();
                });
                $("#name").focusout(function(){
                    check_table_name();
                });
                $("input").keyup(function(){
                    query();
                });
                $("input").change(function(){
                    query();
                });
                $("input").focusout(function(){
                    query();
                });
            });
        </script>
    </head>
    <body>
        
        <input type="button" onclick="insert_row();" class="button" value="Zeile einf&uuml;gen" /> &nbsp; <input type="button" onclick="delete_row()" class="button" value="Letzte Zeile l&ouml;schen" /><br><br>
        
        <table border=0>
            <tr>
                <td class="id">#</td>
                <td>Bezeichnung</td>
                <td>Typ</td>
                <td>L&auml;nge</td>
                <td>Werte</td>
                <td>Null</td>
                <td>Standard</td>
                <td>Zus&auml;tze</td>
                <td>Einzigartig</td>
                <td>Prim&auml;rschl&uuml;ssel</td>
            </tr>
            <tr>
                <td class="id">1</td>
                <td><input type="text" id="name_1" /></td>
                <td><input type="text" id="type_1" /></td>
                <td><input type="number" id="length_1" /></td>
                <td><input type="text" id="values_1" /></td>
                <td><input type="checkbox" id="null_1" /></td>
                <td><input type="text" id="default_1" /></td>
                <td><input type="text" id="extra_1" /></td>
                <td><input type="checkbox" id="unique_1" /></td>
                <td><input type="checkbox" id="primary_1" /></td>
            </tr>
            <tr>
                <td class="id">2</td>
                <td><input type="text" id="name_2" /></td>
                <td><input type="text" id="type_2" /></td>
                <td><input type="number" id="length_2" /></td>
                <td><input type="text" id="values_2" /></td>
                <td><input type="checkbox" id="null_2" /></td>
                <td><input type="text" id="default_2" /></td>
                <td><input type="text" id="extra_2" /></td>
                <td><input type="checkbox" id="unique_2" /></td>
                <td><input type="checkbox" id="primary_2" /></td>
            </tr>
        </table>
    <div id="query"></div>
        
    </body> 
    LG Spam

  • #2
    ich blick deinen code gerade nicht, aber kannste nicht einfach was mit
    http://api.jquery.com/delegate/

    machen?

    Kommentar


    • #3
      Zitat von moma Beitrag anzeigen
      ich blick deinen code gerade nicht, aber kannste nicht einfach was mit
      http://api.jquery.com/delegate/

      machen?
      Danke! hätte ich selber drauf kommen können
      Naja, jetzt weiß ich endlich wofür Live-Events da sind
      Jetzt funzt es.

      Kommentar

      Lädt...
      X