2016-09-11 46 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

如何使這一功能工作(把重點放在與DIV3點擊btnFocus)與動態添加元素呢?爲什麼btnReference沒有定義,如果元素動態添加到DOM?

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

@ T.J.Crowder - 感謝您的評論。我已經添加了代碼段。 – FrenkyB

+0

@NehalJWani - 它不起作用,因爲這在focusToDiv中比在onclick中有另一個含義。在onclick函數中,這是對btnFocus的引用。在focusToDIV中,這意味着窗口對象。 – FrenkyB

回答

2

你需要改變的onclick方法從focusToDIV()focusToDIV($(this))

由於元素未被傳遞,因此btnReference未定義,您正在對該未定義的變量調用方法。

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


} 
相關問題