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 -->
爲什麼不'VAR focusToDIV =函數(){this.find( 「#DIV3」)專注()}'和'的onclick = focusToDiv()' –
@ T.J.Crowder - 感謝您的評論。我已經添加了代碼段。 – FrenkyB
@NehalJWani - 它不起作用,因爲這在focusToDiv中比在onclick中有另一個含義。在onclick函數中,這是對btnFocus的引用。在focusToDIV中,這意味着窗口對象。 – FrenkyB