Kendo-Events in dynamisch generiertem HTML

ich nutze den MS IE 11. Da es sich um ein Offline Projekt handelt wird es auch ausschließlich auf einem Win7 oder 8, Multitouch Industrie PC laufen. Keine Mobilen Devices.
Ich habe in deinem Link die Funktion "addAnalyticsDataPoint" entdeckt. Könnte ich mit dieser eventuell meinem jQuery Code meine ID, generiert aus dem JS-Code finden lassen?

in meinem Code versuche ich das Kendo außen vor zu lassen. hier könnte auch einfach nur ein ALERT rein, zum Test, allerdings sieht mein in jQuery aufgerufene ID, nicht die ID, die ich aus dem RESULT im JS Skript erzeuge nicht. die CSS allerdings schon, den immerhin Platziere ich in den Tabellen meine Styles für Icons usw. Aber ich kann diese IDs nivht mit meinen jQuery ansprechen ... warum auch immer.

KURZ GESAGT: wie greife ich mit jQuery auf die mit Javascript automatisch generierte Tabellenzeilen ID zu?
 
Zuletzt bearbeitet:
Ich habe in deinem Link die Funktion "addAnalyticsDataPoint" entdeckt.
Ich kenne Kendo nicht, allerdings lässt der Name nicht vermuten, dass es eine Lösung für dich sein könnte. Ich habe aber auch nicht die Zeit, mich in Kendo reinzulesen, um die eine Lösung vorzuschlagen.

KURZ GESAGT: wie greife ich mit jQuery auf die mit Javascript automatisch generierte Tabellenzeilen ID zu?
Das geht leicht:
Javascript:
$("#your-table").on("click", "tr", function() {
  // Do something
});
#your-table in ein Selektor für das Element, welches die dynamisch hinzugefügten Elemente beinhaltet. Dies ist bei dir wahrscheinlich ein <table>-Element.

"tr" ist der Selektor für das Element, von dem das Event ausgehen muss, damit die Callback-Funktion aufgerufen wird.

Siehe auch: http://api.jquery.com/on/
 
Habe meiner Table mal die ID"table-Name" gegeben und versucht die TR anzusprechen, geht aber nicht. ich denke hier ist wirklich das Problem, dass die über Javascript erzeugte Tabelle von jQuery nicht gesehen wird. Denn wenn ich ein Element IN HTML erzeugt anspreche klappt es.
wie kann ich also dem jQuery sagen, lese deine IDs erst, wenn alles beendet ist. ich führe das jQuery auch erst nach der Tabellen-Erzeugerfunktion aus.
 
Nein, mein Code müsste schon so richtig sein. Kannst du zeigen, wie du meinen Code in deinen eingebettet hast? Kannst du das HTML zeigen?
 
Dein Code geht auch, wenn sich das Table im HTML-Dokument befindet und nicht durch Javascript generiert wird.

Das HTML (natürlich Kendo und jQuery + MeinScript.js mit eingebunden, habe nur das Explorer DIV abgedruckt.)
Zu Kendo muss noch
HTML:
<script>var app = new kendo.mobile.Application(document.body);</script>
im HEAD eingefügt werden.
Die Tabelle wird im DIV "explorerContents" eingefügt.

HTML:
    <!-- Explorer -->
<div id="explorer">
     
        <div id="theExplorer" class="siteTag">
            <span>Projekte | <div id="pathstring"></div></span>
        </div>

  
        <A HREF="#" onMouseDown="subFolder(escape( fso.GetParentFolderName( frmSearch.txtPath.value ) ) ); return false;">
            <div id="folderUP" ></div>
        </A>
        <div class="expTableheader"></div>
        <FORM ID="frmSearch" NAME="frmSearch">
          <TABLE BORDER="0" CELLPADDING="0" STYLE="border-collapse: collapse;" CELLPADDING="2">
            <TR style="visibility:hidden">
              <TD><FONT FACE="Arial" SIZE="2"><B> Mask :  </B></FONT></TD>
              <TD><INPUT TYPE="text" VALUE="*.*" ID="txtMask" NAME="txtMask" CLASS="formItem" STYLE="width:600;"></TD>
            </TR>
            <TR style="visibility:hidden">
              <TD><FONT FACE="Arial" SIZE="2"><B> Path :  </B></FONT></TD>
              <TD><INPUT TYPE="text" ID="txtPath" NAME="txtPath" CLASS="formItem" STYLE="width:600;"></TD>
            </TR>
            <TR>
                <TD> </TD>
                <TD>
                    <INPUT style="visibility:hidden" TYPE="submit" VALUE="Search" CLASS="formItem" STYLE="width:150;"
                    onClick="document.frmSearch.txtPath.value = theProjPath; scan( ); frmSearch.txtMask.focus( ); frmSearch.txtMask.select( ); return false;">
     
                    <INPUT style="visibility:hidden" TYPE="checkbox" CHECKED ID="chkShowFolders" NAME="chkShowFolders">
                    <LABEL style="visibility:hidden" FOR="chkShowFolders">Show sub-folders</LABEL>
                </TD>
            </TR>
          </TABLE>
        </FORM>     

        <div id="explorerContents"></div>


        <!-- ende charmbar explorer -->
        <div id="charmbar_dwn_expl"><span style="float:right" onClick="MM_DW_effectSlide($('#charmbar_dwn_expl'),'hide','slide','down',239,330);">close debugg</span>

            <img src="images/icons/copyf.png" id="the_charmbar_dwn_expl_copy"
               onMouseDown="MM_swapImage('the_charmbar_dwn_expl_copy','','images/icons/copyf_inverse.png',1)"
               onMouseOut=""
               onClick="initCopy(); copyButton = true ; " /><!-- onMouseOut="MM_swapImgRestore()" bleibt gedrückt -->
     
            <img src="images/icons/pastef_blocked.png" id="the_charmbar_dwn_expl_paste"
               onMouseOver="MM_swapImage('the_charmbar_dwn_expl_paste','','images/icons/pastef_blocked.png',1)"
               onMouseOut="MM_swapImgRestore()"
               onClick="" />
     
            <img src="images/icons/cutf.png" id="the_charmbar_dwn_expl_cut"
               onMouseOver="MM_swapImage('the_charmbar_dwn_expl_cut','','images/icons/cutf_inverse.png',1)"
               onMouseOut="MM_swapImgRestore()"
               onClick="" />
     
            <img src="images/icons/renamef.png" id="the_charmbar_dwn_expl_rename"
               onMouseOver="MM_swapImage('the_charmbar_dwn_expl_rename','','images/icons/renamef_inverse.png',1)"
               onMouseOut="MM_swapImgRestore()"
               onClick="" />
     
            <img src="images/icons/deletef.png" id="the_charmbar_dwn_expl_delete"
               onMouseOver="MM_swapImage('the_charmbar_dwn_expl_delete','','images/icons/deletef_inverse.png',1)"
               onMouseOut="MM_swapImgRestore()"
               onClick="" />
     
            <img src="images/icons/newfolder.png" id="the_charmbar_dwn_expl_newfolder"
               onMouseOver="MM_swapImage('the_charmbar_dwn_expl_copy','','images/icons/newfolder_inverse.png',1)"
               onMouseOut="MM_swapImgRestore()"
               onClick="" />
     
     
             <label id="charmbar_dwn_expl_copy_label">Kopieren</label>

        </div> <!-- ende charmbar explorer -->
      
</div> <!-- ende explorer komplett -->

    <!-- ENDE Explorer -->

Dann der gesamte Explorerscript und was dazugehört:
Javascript:
//-------------- Explorer ---------------
/* */
var fso = new ActiveXObject( "Scripting.FileSystemObject" );
var result = new String( );
var FileName = new String( );
var FolderName = new String( );
var FolderPaths = new String( );
var FileName = new String( );
var FilePaths = new String( );
var Extention = new String( );
var theProjPath = (pathToMyDocuments +  "\\CM5Projects\\");
var allThepathsFIX = null;
var chsdFolder = null;

// Wandle (bytes, KB, MB, GB oder TB).
function toMetric( bytes ) {

    // Check Terabytes (TB).
    if( bytes >= 1099511627776 ) { return ( Math.floor( bytes / 1099511627776 ) + ' TB' ); }

    // Check  Gigabytes (GB).
    if( bytes >= 1073741824 ) { return ( Math.floor( bytes / 1073741824 ) + ' GB' ); }

    // Check  Megabytes (MB).
    if( bytes >= 1048576 ) { return ( Math.floor( bytes / 1048576 ) + ' MB' ); }

    // Check  Kilobytes (KB).
    if( bytes >= 1024 ) { return ( Math.floor( bytes / 1024 ) + ' KB' ); }

    // Wenn weniger als 1 KB, zeige nur 1 KB.
    return '1 KB';
}


// Zeige Inhalt wenn auf sub-folder geklickt
function subFolder( path ) {
 
    // Update den txtPath.
    frmSearch.txtPath.value = unescape( path );
 
    var pathcomplstring = path.replace(/%5C/g, ","); // Pfad trenner durch Komma ersetzen für besseres Splitting
 
    // vor > vor > vor > vorletzter Pfad
    var pathsrt02 = pathcomplstring.split(',', 1000); //1000 = max. mögl. verschachtelte Unterordner
    for (var i=0; i<pathsrt02.length -4; i++) {
                  thePath02 = "";
                  thePath02 +=  pathsrt02[i];
    }
    // vor > vor > vorletzter Pfad
    var pathsrt03 = pathcomplstring.split(',', 1000);
    for (var i=0; i<pathsrt03.length -3; i++) {
                  thePath03 = "";
                  thePath03 +=  pathsrt03[i];
    }
    // vor > vorletzter Pfad
    var pathsrt04 = pathcomplstring.split(',', 1000);
    for (var i=0; i<pathsrt04.length -2; i++) {
                  thePath04 = "";
                  thePath04 +=  pathsrt04[i];
    }
    // vorletzter Pfad
    var pathsrt05 = pathcomplstring.split(',', 1000);
    for (var i=0; i<pathsrt05.length -1; i++) {
                  thePath05 = "";
                  thePath05 +=  pathsrt05[i];
    }
    // Letzter Pfad
    var pathsrt06 = pathcomplstring.split(',', 1000);
    for (var i=0; i<pathsrt06.length; i++) {
                  thePath06 = "";
                  thePath06 +=  pathsrt06[i];
    }
  
    //Füge Pfade zusammen "rsaquo;" ist kleineres ">"-Zeichen
    var allThepaths = " &rsaquo; " +  "..." + thePath02 +
                      " &rsaquo; " + thePath03 +
                      " &rsaquo; " + thePath04 +
                      " &rsaquo; " + thePath05 +
                      " &rsaquo; " + thePath06 ;
 
    //Alle Pfade ab CM5Projects >> zeigen
    allThepathsFIX = allThepaths.substring(allThepaths.lastIndexOf("CM5Projects") + 11);
    // UmlautFix
    allThepathsFIX = allThepathsFIX.replace(/%C4/g, "Ä");
    allThepathsFIX = allThepathsFIX.replace(/%E4/g, "ä");
    allThepathsFIX = allThepathsFIX.replace(/%DC/g, "Ü");
    allThepathsFIX = allThepathsFIX.replace(/%FC/g, "ü");
    allThepathsFIX = allThepathsFIX.replace(/%D6/g, "Ö");
    allThepathsFIX = allThepathsFIX.replace(/%F6/g, "ö");
    allThepathsFIX = allThepathsFIX.replace(/%21/g, "!");
    allThepathsFIX = allThepathsFIX.replace(/%23/g, "#"); 
    allThepathsFIX = allThepathsFIX.replace(/%A7/g, "§");
    allThepathsFIX = allThepathsFIX.replace(/%24/g, "$"); 
    allThepathsFIX = allThepathsFIX.replace(/%25/g, "%"); 
    allThepathsFIX = allThepathsFIX.replace(/%26/g, "&");
    allThepathsFIX = allThepathsFIX.replace(/%28/g, "(");
    allThepathsFIX = allThepathsFIX.replace(/%29/g, ")");
    allThepathsFIX = allThepathsFIX.replace(/%3D/g, "=");
    allThepathsFIX = allThepathsFIX.replace(/%26/g, "&");
    allThepathsFIX = allThepathsFIX.replace(/%2C/g, ",");
    //Anzeigen
    document.getElementById("pathstring").innerHTML = allThepathsFIX.replace(/%20/g, " ");
 
    // Neue Suche im neuen Ordner.
    scan( );
}



// Scan der Pfade.
function FindFile( searchPath ) {

    // Tabellenfarbe aktivieren.
    var toggle = true;

    // chkShowFolders ist checked, Unterordner anzeigen
    if( frmSearch.chkShowFolders.checked ) {

        // Check ob  Projektfolder (ROOT) ist.
        if( fso.GetParentFolderName( frmSearch.txtPath.value ).length > 39 ) { //39 war hier die höhe des Rootsfolders (Projekte)
            MM_changeProp('folderUP','','visibility','visible',''); //UP Folder zeigen wenn außerhalb von root

            // Hinzufügen des Zurück-Folders zur Tabelle.
            result += '<A HREF="#" onMouseDown=" subFolder( \'' + escape( fso.GetParentFolderName( frmSearch.txtPath.value ) ) + '\' ); return false;"></A>'
            // Setzen der Colortoggle variable
            toggle = !toggle;
         
        } else { MM_changeProp('folderUP','','visibility','hidden',''); } //UP Folder verstecken wenn in root


        // Ordner zu Ordner aktionen
        var folderEnum = new Enumerator( searchPath.SubFolders );
        for( var i = 0; !folderEnum.atEnd( ); folderEnum.moveNext( ) ) {
            var folder = folderEnum.item( );
         
            //folder.Name und "folder.Path" global machen
            FolderName     = folder.name ;
            FolderPaths = folder.Path ;

            //Ordnerdatumsformat Deklarieren
            var folderDate = folder.DateLastAccessed;
            var folderYear = new Date(folderDate).getFullYear()
                // MonatsFix>> problem mit dem Datum, es wird immer eins abgezogen:
                //          >> hier setze ich es wieder drauf. Test ob bei Sommerzeit/Winterzeit wieder normal
                var folderMonthErr = ('0' + new Date(folderDate).getMonth()).substr(-2)
                var folderMonthN = parseInt(folderMonthErr) +1
                // ENDE MonatsFix <<
            var folderMonth = ('0' + folderMonthN).substr(-2)
            var folderDay = ('0' + new Date(folderDate).getDate()).substr(-2)
            folderDate = " &nbsp; " + folderYear + "." + folderMonth + "." + folderDay
         
         
            // Hinzufügen der Ordner zur Tabelle.
            result +=
                '<TR onMouseUp="if (TabHold === true) {chsdFolder=( \'' + escape( FolderPaths ) + '\' ); alert(chsdFolder);} else {subFolder( \'' + escape( FolderPaths ) + '\' ) ;return false;}">' +
                '<TD NOWRAP> <div class="folder">' + '<span  CLASS="contentname">' + FolderName  + '</span>' + '</div>  </TD>' +
                '<TD NOWRAP><span CLASS="exptitles" > ' + folderDate + ' </span></TD>' +
                    '<TD NOWRAP  align="right"><span CLASS="exptitles" align="right"> ' +
                    toMetric( folder.size ) + '&nbsp; </span></TD></TR>'

                // Setzen der Colortoggle variable
                toggle = !toggle;
        }
     
     
    }
  
    // Dateien zu Dateien der Ordnerinhalte Aktionen.
    var fileEnum = new Enumerator( searchPath.Files );
    for( var i = 0; !fileEnum.atEnd( ); fileEnum.moveNext( ) ) {
        var file = fileEnum.item( );
             
        // Vergleiche Datei mit Filenameparameter.
        if( FileName == "*" || file.name.slice( 0, file.name.lastIndexOf( "." ) ).toLowerCase( ).indexOf( FileName ) > -1 ) {

            // Vergleiche DateiSuffix
            if( Extention == "*" || file.name.slice( file.name.lastIndexOf( "." ) + 1 ).toLowerCase( ).indexOf( Extention ) > -1 ) {

                //file.Name und "file.Path" global machen
                FileName  = file.name ;
                FilePaths = file.Path ;
             
                //File Ordnerdatumsformat Deklarieren
                var proectDate = file.DateLastAccessed;
                var proectYear = new Date(proectDate).getFullYear()
                    // MonatsFix>> problem mit dem Datum, es wird immer eins abgezogen:
                    //          >> hier setze ich es wieder drauf. Test ob bei Sommerzeit/Winterzeit wieder normal
                    var proectMonthErr = ('0' + new Date(proectDate).getMonth()).substr(-2)
                    var proectMonthN = parseInt(proectMonthErr) +1
                    // ENDE MonatsFix <<
                var proectMonth = ('0' + proectMonthN).substr(-2)
                var proectDay = ('0' + new Date(proectDate).getDate()).substr(-2)
                proectDate = " &nbsp; " + proectYear + "." + proectMonth + "." + proectDay
             
                // Füge Datei(en) der Tabelle hinzu
                result +=
                    '<TR' + ( ( toggle ) ? '' : ' ' ) + '>' +
                    '<TD NOWRAP><div class="file" <A TARGET="_blank" HREF="' +
                    FilePaths + '">' +
                    '<span  CLASS="contentname"> ' + FileName + '</span>' +
                    '</A> </div></TD>' +
                    '<TD NOWRAP><span CLASS="exptitles" > ' + proectDate + ' </span></TD>' +
                    '<TD NOWRAP  align="right"><span CLASS="exptitles" align="right"> ' +
                    toMetric( file.size ) + '&nbsp; </span></TD></TR>';

                // Setzen der Colortoggle variable
                toggle = !toggle;
            }
        }
    }
}


// Überprüfen und Vergleichen der der Pfade und Dateinamen und initiiert den Dateiscan.
function scan( ) {

    // Parse den Dateinamen und Suffix
    FileName = ( frmSearch.txtMask.value.lastIndexOf( "." ) > -1 ) ? frmSearch.txtMask.value.slice( 0, frmSearch.txtMask.value.lastIndexOf( "." ) ) : ( frmSearch.txtMask.value.length > 0 ) ? frmSearch.txtMask.value.toLowerCase( ) : "*";
    Extention = ( frmSearch.txtMask.value.lastIndexOf( "." ) > -1 ) ? frmSearch.txtMask.value.slice( frmSearch.txtMask.value.lastIndexOf( "." ) + 1 ).toLowerCase( ) : "*";

    // Vergleichen erhaltenen Pfad
    if( frmSearch.txtPath.value.length > 0 && fso.FolderExists( frmSearch.txtPath.value ) ) {

        // Wenn Pfad Exisitiert Erstelle Tabellenkopf
        result =
            '<TABLE id="explorertable" class="expTable" WIDTH="100%" CELLPADDING="0" ><TR>' +
            '<TD WIDTH="50%" CLASS="find"><b>&nbsp; </b></TD>' +
            '<TD WIDTH="5%" CLASS="exptitles"><b>&nbsp; </b></TD>' +
            '<TD WIDTH="3%" CLASS="exptitles" align="right"><b>&nbsp; </b></TD></TR>';


        // Sammle gültige Dateinamen
        FindFile( fso.GetFolder( frmSearch.txtPath.value ) );
        // Tabelle schließen
        explorerContents.innerHTML = result + "</TABLE>";
    } else {

        // Probleme mit dem Pfad
        alert( "The path structure is incorrect. Please check the path structure. \nIf you're sure the path is correct try again or contact KC-Produkte GmbH." );
    }

$("#explorertable").on("click", "tr", function()
  alert("getabt");
});

//Touch-Evets im Explorer erkennen und funktion ausführen

$(document).ready(function(){
    $("#explorerContents").kendoTouch(
        { hold:
              function (e) {
                  TabHold = true;
                  MM_DW_effectSlide($('#charmbar_dwn_expl'),'show','slide','down',239,330);
              }
         });
});

//Editierfunktionen
  /* Hier die Funktionen löschen, ausschneiden, umbenennen usw.*/

TabHold = false;  // TabHold reset.

//------------ ENDE Explorer ---------------

Zeile 242 hatte ich deinen Code eingebaut, die Table (Zeile 226) mit der ID "explorertable" und das TR im Result (Zeile 155).
Allerdings hat das nicht hingehauen. Aber wie gesagt, ist nicht mehr nötig, da ich in Zeile 155 das so gelöst hab, klappt es jetzt 100% perfekt :) Einmal Tab (oder Click) öffnet Datei oder Folder und listet neuen ordner Inhalt und bei HOLD (Langer Fingetrab) wird die Charmbar unten geöffnet und der Ordnerpfad in der TR Zeile, auf dert das HOLD ausgeführt wird gemerkt.
 
Zuletzt bearbeitet:
Zurück