2016-09-11 24 views
1

要素が動的に追加されたときに、関数呼び出しに問題があります。 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 -->

+1

なぜだけではなく、 'VAR focusToDIV =機能(){this.find( "#のDIV3")(フォーカス)。}'と 'のonclick = focusToDiv()' –

+1

- あなたのコメントに感謝します。コードスニペットを追加しました。 – FrenkyB

+0

@NehalJWani - これは、onclickよりもfocusToDivの別の意味があるため、機能しません。 onclick関数では、これはbtnFocusへの参照です。 focusToDIVでは、これはウィンドウオブジェクトを意味します。 – FrenkyB

答えて

2

あなたはfocusToDIV()からfocusToDIV($(this))にonclickの方法を変更する必要があります。

要素が渡されなかったため、btnReferenceは未定義であり、未定義の変数に対してメソッドを呼び出していました。 T.J.Crowder @

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>"); 


} 
関連する問題