Ich habe ein Problem mit Funktionsaufruf, wenn Element dynamisch hinzugefügt wird. Here ist der Link zum Code Stift Beispiel. Funktionsaufruf - Onclick - ist von dieser Schaltfläche:Dynamisch hinzugefügt Element Funktionsaufruf funktioniert nicht
<button id="btnFocus" class="btnFocus" onclick="focusToDIV($(this))">Focus to DIV</button>
Funktion focusToDIV:
var focusToDIV = function(btnReference){
btnReference.parent().find("#div3").focus();
}
erstes Element, das auf diese Schaltfläche enthält statisch hinzugefügt. Alle anderen Elemente können mit dem Button 'Add new' hinzugefügt werden. Mit der statisch hinzugefügten Elementfunktion wird focusToDIV aufgerufen und div3 erhält den Fokus.
Mit dynamisch hinzugefügt Elementen btnReference nicht definiert ist, ist, warum dieser Fehler ausgelöst wird:
Uncaught TypeError: Cannot read property 'parent' of undefined
Wie diese Funktion Arbeit machen mit dynamisch zugefügten Elementen (Fokus auf div3 mit Klick auf btnFocus setzen)? Warum ist btnReference nicht definiert, wenn Element dynamisch zu DOM hinzugefügt wird?
var focusToDIV = function(btnReference){
btnReference.parent().find("#div3").focus();
}
var addNew = function(){
$("#divMain").append("<div class='divContainer' class='divContainer'> <div id='divInner' class='divInner'>" +
"<div id='div2' class='div2'> <div id='div3' class='div3' contentEditable='true'></div>" +
"</div></div> <button id='btnFocus' class='btnFocus' onclick='focusToDIV($(this))'>Focus to DIV</button> </div>");
}
.divMain{
height: 100vh;
width: 100vw;
}
.divContainer{
position: relative;
display: inline-block;
left: 20%;
top: 10%;
}
.divInner{
width: 300px;
height: 300px;
border: 1px solid black;
}
.div2{
position: relative;
left: 20px;
top: 20px;
width: 200px;
height: 100px;
border: 1px solid blue;
}
.btnFocus{
position: absolute;
top: 305px;
}
.div3{
position: relative;
left: 10%;
top: 10%;
width: 150px;
height: 80px;
border: 1px solid red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divMain" class="divMain">
<button id="btnAdd" onclick="addNew()">Add new</button>
<div class="divContainer" class="divContainer">
<div id="divInner" class="divInner" >
<div id="div2" class="div2">
<div id="div3" class="div3" contentEditable="true"></div>
</div>
</div>
<button id="btnFocus" class="btnFocus" onclick="focusToDIV($(this))">Focus to DIV</button>
</div><!-- divContainer -->
</div><!-- divMain -->
Warum nicht einfach 'var focusToDIV = function() {this.find ("# div3") konzentrieren().}' Und 'Onclick = focusToDiv()' –
@ T.J.Crowder - vielen Dank für Ihren Kommentar. Ich habe ein Code-Snippet hinzugefügt. – FrenkyB
@NehalJWani - es funktioniert nicht, weil das in focusToDiv eine andere Bedeutung hat als in onclick. In der Onclick-Funktion ist dies ein Verweis auf btnFocus. In focusToDIV bedeutet dies Fensterobjekt. – FrenkyB