要素が動的に追加されたときに、関数呼び出しに問題があります。 Hereはコードペンの例へのリンクです。関数呼び出し - のonclick - このボタンからです:動的に追加された要素関数呼び出しが動作しない
<button id="btnFocus" class="btnFocus" onclick="focusToDIV($(this))">Focus to DIV</button>
機能focusToDIV:このボタンが含まれてい
var focusToDIV = function(btnReference){
btnReference.parent().find("#div3").focus();
}
最初の要素は静的に追加されます。他のすべての要素はボタン '新規追加'で追加できます。静的に追加された要素関数focusToDIVが呼び出され、div3がフォーカスを受け取ります。このエラーがスローされた理由をbtnReferenceが定義されていない動的に追加要素を持つ
、それは次のようになります。
Uncaught TypeError: Cannot read property 'parent' of undefined
動的に追加要素を(btnFocusにクリックでDIV3に焦点を置く)この機能を動作させるためにどのように?要素がDOMに動的に追加された場合、なぜbtnReferenceが定義されないのですか?
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 -->
なぜだけではなく、 'VAR focusToDIV =機能(){this.find( "#のDIV3")(フォーカス)。}'と 'のonclick = focusToDiv()' –
- あなたのコメントに感謝します。コードスニペットを追加しました。 – FrenkyB
@NehalJWani - これは、onclickよりもfocusToDivの別の意味があるため、機能しません。 onclick関数では、これはbtnFocusへの参照です。 focusToDIVでは、これはウィンドウオブジェクトを意味します。 – FrenkyB