jQuery zum Ausführen auf Appended Loaded HTML

Question

Ich erstelle eine Chrome-Erweiterung, um ein benutzerdefiniertes HTML-Menü mit Content Script an eine Seite anzuhängen. Der Inhalt funktioniert gut und das Menü funktioniert perfekt, aber ich bin derzeit die HTML aus einem var Laden, wie folgt aus:

var gacMenu = ''; 
    gacMenu+='<div id="menu">'; 
    gacMenu+='menu content HTML'; 
    gacMenu+='menu content HTML'; 
    gacMenu+='menu content HTML'; 
    gacMenu+='menu content HTML'; 
    gacMenu+='</div>'; 

und dann auf die Seite wie folgt anhängen:

$("body").append(gacMenu); 

Seit Ich erstelle immer noch das Menü selbst, die Bearbeitung des HTML aus der var ist irgendwie nervig, und ich habe versucht, einen getrennten HTML mit nur dem Menücode zu erstellen und dann LOAD und APPEND diese Datei an die Seite mit diesem Code:

$(function() { 
    $('body').append($('body').load('menu.html')); 
}); 

Der Inhalt wird geladen, aber das Problem ist, dass andere jquery-Funktionen wie .click() und .change() nicht mit dem geladenen & Angehängten Inhalt arbeiten, nur wenn es aus der Var geladen wird.

Im Arbeitsszenario befinden sich beide var mit HTML- und jquery-Funktionen in derselben JS-Datei. Hier ist ein Code, der funktioniert, wenn HTML aus var geladen wird, aber das funktioniert nicht, wenn HTML wird aus der Datei geladen:

$("input:checkbox[name=onoffswitch]").change(function() { 
    if ($(this).is(':checked')) { 
     chrome.storage.sync.set({'gacMenuSwitch': '1'}, function(toggleOn){ // Define a variável condificonal do menu para 1 
     console.log('Switch is ON' + '\n' + 'Menu var is set to 1'); 
     }); 
    } else { 
     chrome.storage.sync.set({'gacMenuSwitch': '0'}, function(toggleOff){ // Define a variável condificonal do menu para 0 
     console.log('Switch is OFF' + '\n' + 'Menu var is set to 0'); 
     }); 
    } // fim do if/else 
}); 

Es tut mir leid, wenn dies eine lame Frage, aber ich bin auf Anfang Phasen der Programmierung. Was ich vermisse?

Answer 1

Mit Hilfe von @wOxxOm habe ich herausgefunden, dass es ein paar Dinge zu tun gibt, um HTML mit Hilfe von Inhaltsskripten anzuhängen.

1. Ich hatte meine Datei „menu.html“ auf dem Manifest Whitelist durch die Verwendung "web_accessible_resources": ["menu.html"]
2. ich get() erstellt mit einer Warnung vor dem eigentlichen append nur um zu sehen, ob die HTML gezogen wurde. Ich hatte einige Probleme, weil ich nicht die chrome.extension.getURL Verwendung für die Datei zu suchen und die get() wurde returnin [object] [object] statt HTML, so dass, sobald ich tat chrome.extension.getURL('menu.html') war alles in Ordnung
3. Ich hatte Probleme mit dem vorherigen .append() und .load() Ich habe gepostet, also habe ich versucht, $.get(chrome.extension.getURL('menu.html'), function(data2) {$(data2).appendTo('body');}); zu verwenden und konnte die Datei greifen. Alle jquery, die nicht funktionierte, wurden in den Rückruf des Get bewegt, so ist jetzt alles