动态添加的元素函数调用不工作

Dynamically added element function call not working

本文关键字：工作 函数调用 元素 添加 动态      更新时间：2023-09-26

我有一个函数调用的问题，当元素是动态添加的。这里是代码笔示例的链接。函数调用- 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 -->

您需要将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>");

}
相关文章：