JQuery .extend() und Javascript-Klasse

Question

Ich habe versucht, einige meiner Java-Objekte in mein dynamisches Dokument durch die Verwendung von JQuery (1.7.1 oder 2.2.3) zu integrieren. Dazu habe ich die JQuery-Funktion .extend() verwendet, um ein einfaches JQuery-Objekt zu ergänzen, das ich dann an mein Dokument angehängt habe.

Ich denke, es ist etwas falsch in meiner Herangehensweise (die ich korrigierte wie am Ende der Frage dargestellt), aber ich habe ein irreführendes Verhalten gefunden, das ich nicht erklären konnte und meinen Code teilweise funktionieren ließ, als ich dachte total arbeiten oder gar nicht.

Der allgemeine Zweck meines Codes ist es, ein "Knopf" -Element (in einem <div> Abschnitt) im Code hinzuzufügen, um eine bestimmte Behandlung anzuwenden, wenn dieses Element angeklickt wird, sowie eine andere Behandlung darauf. Grundsätzlich möchte ich, dass sich mein "Button" JQuery-Objekt wie das Button JavaScript-Objekt/die Klasse verhält, die ich erstellt habe (wie ich es bei einem objektorientierten Ansatz erwarten würde).

Hier ist der vereinfachte Code für das Button Objekt:

function Button(myState) 
{ 
    this.setState(myState); 
} 
Button.prototype.printState = function() 
{ 
    console.log(this.state); 
} 
Button.prototype.setState = function(myState) 
{ 
    this.state = myState; 
} 

Hier ist die JQuery + Knopf Basiscode, der das Objekt erstellt:

// Create a "JQuery+Button" object 
function createButton() 
{ 
    var result = $("<a href='#' id='button'></a>"); 
    result.extend(new Button(false)); // Can also be done with result = $.extend(result, new Button(false)); 
    result.append("clickable button"); // A dummy button text, see below 

    result.printState(); // OK: print "false" 
    return result; 
} 

Und hier ist die "Schaffung + action" Teil des Codes:

function associateButtons() 
{ 
    var myButton = createButton(); 

    // Add an action on click => Works "as excepted" => print the state when the button will be clicked 
    myButton.on("click", myButton, function(event) { 
     console.log("click inner HTML:" + event.data.html()); // OK: print the JQuery associated HTML 
     event.data.printState(); // OK: call the associated function 
    }); 


    $("#buttons_container").append(myButton); // Add the button to the page at the specified place 
    $("#buttons_container").append(myButton.clone()); // Add the same button a second time, but won't have the "onclick" bind 

    // Do an action no each button => Does not work! => The function is undefined 
    $("#buttons_container #button").each(function(index,element) { 
     console.log("each inner HTML:" + $(element).html()); // OK: print the JQuery associated HTML, same as above ; also works with $(this) 
     $(element).printState(); // FAIL: "TypeError: undefined is not a function" 
    }); 
} 

Nun führen Sie den Test:

associateButtons(); 

Also fragte ich mich, warum funktioniert die "Ereignis" -Methode, während die "Each" -Methode nicht funktioniert? Ich bin zweifelhaft in Bezug auf den Typ des Elements, das vom Event-Manager übergeben wird (eindeutig ein Objekt, das ein JQuery + Button-Objekt durch die Struktur event.data einkapselt), das sich von dem Element unterscheidet, das von "jedem Manager" übergeben wird (was nicht der JQuery ist) + Button-Objekt, aber ein "einfaches" JQuery-Objekt).

Ich habe es geschafft, Abhilfe zu finden, aber die Schaltfläche in der JQuery Einkapseln durch die Funktion .data() angefügt:

// Create a "JQuery+Button" object 
function createButton() 
{ 
    var result = $("<a href='#' id='button'></a>"); 
    result.data("button", new Button(false)); 
    result.append("clickable button"); // A dummy button text, see below 

    result.data("button").printState(); // OK: print "false" 
    return result; 
} 

Und im Falle (event.data.data("button")) und dem „jeder“ ($(element).data("button")) mit dem Objekt arbeiten das funktioniert gut.

Allerdings ist es nicht so "objektorientiert", wie ich es gerne durch die Definition meines idealen "JQuery + Button" -Objekts hätte.

Gibt es einen Weg, um es zu erreichen, vermisse ich etwas in der "jeder" Behandlung?

Vielen Dank im Voraus;)

Answer 1

1) Sie sind Anfügen mehrere Tasten mit der gleichen id ("button") auf den gleichen HTML-Dokument, das böse ist.

2) Wenn Sie result.extend(new Button(false)); zu tun, fügen Sie nur Objekte, die das result Objekt, nicht zu dem HTML-Elemente, noch, natürlich, das Objekt jQuery von $("#buttons_container #button") zurückgegeben, noch die jQuery-Objekte in der jQuery forEach Schleife.

EDIT:

Wenn Sie dies tun:

var myButton = createButton(); 
myButton.on("click", myButton, function(event) { (...) } 

Sie werden durch die createButton Funktion einen Click-Ereignishandler für das Objekt zurück Zugabe, die erweitert wird, so dass Sie Zugriff auf die haben printState-Eigenschaft darauf.

Aber wenn Sie das tun

$("#buttons_container #button").each(function(index,element) { 
    console.log("each inner HTML:" + $(element).html()); 
    $(element).printState(); 
}); 

$(element) ist eine grundlegende Aufgabe jQuery, die nicht verlängert ist, so gibt es keine printState Eigenschaft auf sie.

Darüber hinaus denke ich, dass Sie einen Blick auf die jQuery plugin resources werfen sollten.