Dynamically added element function call not working

Question

I have a problem with function call, when element is dynamically added. Here is the link to code pen example. Function call - onclick - is from this button:

<button id="btnFocus" class="btnFocus"  onclick="focusToDIV($(this))">Focus to DIV</button>

Function focusToDIV:

 var focusToDIV = function(btnReference){        
  btnReference.parent().find("#div3").focus();       
}

First element which contains this button is statically added. All the other elements can be added with button 'Add new'. With statically added element function focusToDIV gets called and div3 receives focus.

With dynamically added elements btnReference is not defined, that is why this error is thrown:

Uncaught TypeError: Cannot read property 'parent' of undefined

How to make this function work (put focus on div3 with click on btnFocus) with dynamically added elements? Why is btnReference not defined, if element is added dynamically to 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 -->

Why not just var focusToDIV = function(){ this.find("#div3").focus()} and onclick=focusToDiv() — Nehal J Wani
– Nehal J Wani, Commented Sep 11, 2016 at 9:58
@T.J.Crowder - thanks for your comment. I've added code snippet. — FrenkyB
– FrenkyB, Commented Sep 11, 2016 at 10:14
@NehalJWani - it doesn't work, because this has another meaning in focusToDiv than in onclick. In the onclick function this is reference to btnFocus. In focusToDIV this means window object. — FrenkyB
– FrenkyB, Commented Sep 11, 2016 at 10:18

Joyson · Accepted Answer · 2016-09-11 09:59:08Z

2

You need to change the onclick method from focusToDIV() to focusToDIV($(this)).

As the element wasn't passed btnReference is undefined and you were calling a method on that undefined variable.

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


}

answered Sep 11, 2016 at 9:59

Joyson

3,0601 gold badge24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamically added element function call not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related