jQuery - binding to elements that are not yet created -

-

[not duplicate] - checked event binding on dynamically created elements? question, , answer start point of question. start off $parent.on('click', '.specificchild' ... etc.). know (see wrapper1). first part of question has nothing referenced question.

within parent element, want create child element , grand-child elements, , have click event on grand-child element.

is possible pre-define child element , pre-define click event, before child/grand-child elements created ?

// wrapper1 related -- works  var $wrapper1 = $('.wrapper1');  var $number1 = $wrapper1.find('.number');  $wrapper1.on('click', '.incrementbutton', function () {      var currentval = parseint($number1.html(), 10);      $number1.html(currentval + 1);  });      // wrapper2 related - doesn't work  // define elements upfront  var $wrapper2 = $('.wrapper2');  var $foundation = $wrapper2.find('.foundation');  var $number2 = $wrapper2.find('.number');  $wrapper2.on('click', '.incrementbutton', function () {      var currentval = parseint($number2.html(), 10);      $number2.html(currentval + 1);  });      $wrapper2.html('<div class="foundation"></div>');  var htmlcontent = '' +          '<div class="arithmetic">' +          '    <div class="number">1</div>' +          '    <div class="incrementbutton">+ 1</div>' +          '</div>';  $foundation.html(htmlcontent);
.wrapper1, .wrapper2 {      background-color: #e8eaf6;      padding: 1em;      width: 12em;;      margin: 1em;  }  .foundation {      background-color: #9fa8da;      padding: 1em;  }  .arithmetic {      background-color: #5c6bc0;      padding: 1em;      overflow: hidden;  }  .number {      width: 1.5em;      height: 1.5em;      text-align: center;      line-height: 1.5;      background-color: white;      float: left;      color: #3949ab;      margin-right: 1em;  }  .incrementbutton {      overflow: hidden;      height: 1.5em;      line-height: 1.5;      text-align: center;      background-color: #3949ab;      border: 1px solid white;      color: #e8eaf6;  }  .incrementbutton:hover {      cursor: pointer;      background-color: #283593;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="wrapper1">    <div class="foundation">      <div class="arithmetic">        <div class="number">1</div>        <div class="incrementbutton">+ 1</div>      </div>    </div>  </div>    <div class="wrapper2"></div>

more specifically, question is:

  1. how can define $foundation before creation ? i.e. before line $wrapper2.html('<div class="foundation"></div>') ?
  2. how can bind click function incrementbutton within wrapper2, before creation of incrementbutton element ?

to bind event future elements use:

$(document).on('click', '.wrapper2 .incrementbutton'.....

in past jquery version use live method.

your section create wrapper2 needed little rearrangemnet.

use append instead of html methods.

no, cannot execute:

var $foundation = $wrapper2.find('.foundation');

before elements class '.foundation' created.

my proposal is:

$(function() {    // wrapper1 related -- works    var $wrapper1 = $('.wrapper1');    var $number1 = $wrapper1.find('.number');    $wrapper1.on('click', '.incrementbutton', function () {      var currentval = parseint($number1.html(), 10);      $number1.html(currentval + 1);    });        var $wrapper2 = $('.wrapper2');      $wrapper2.append('<div class="foundation"></div>');      var $foundation = $wrapper2.find('.foundation');    var htmlcontent = '' +        '<div class="arithmetic">' +        '    <div class="number">1</div>' +        '    <div class="incrementbutton">+ 1</div>' +        '</div>';    $foundation.append(htmlcontent);      var $number2 = $wrapper2.find('.number');    $(document).on('click', '.wrapper2 .incrementbutton', function () {      var currentval = parseint($number2.html(), 10);      $number2.html(currentval + 1);    });  });
.wrapper1, .wrapper2 {    background-color: #e8eaf6;    padding: 1em;    width: 12em;;    margin: 1em;  }  .foundation {    background-color: #9fa8da;    padding: 1em;  }  .arithmetic {    background-color: #5c6bc0;    padding: 1em;    overflow: hidden;  }  .number {    width: 1.5em;    height: 1.5em;    text-align: center;    line-height: 1.5;    background-color: white;    float: left;    color: #3949ab;    margin-right: 1em;  }  .incrementbutton {    overflow: hidden;    height: 1.5em;    line-height: 1.5;    text-align: center;    background-color: #3949ab;    border: 1px solid white;    color: #e8eaf6;  }  .incrementbutton:hover {    cursor: pointer;    background-color: #283593;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>      <div class="wrapper1">      <div class="foundation">          <div class="arithmetic">              <div class="number">1</div>              <div class="incrementbutton">+ 1</div>          </div>      </div>  </div>    <div class="wrapper2"></div>


Comments

Post a Comment

Popular posts from this blog

ruby - Trying to change last to "x"s to 23 -

-
i have been playing around irb , have string looks this: irb(main):072:0> puts ["[\"4354 5432 5432 xxxxx\", \"6547 6547 8543 xxxxx\", \"2344 6543 6674 xxxxx\", \"2346 6236 7543 xxxxx\", \"1273 5585 5587 xxxxx\"]"] => nil irb(main):073:0> what want gsub last 2 "x" s of each 17 digit combination, 23 . what i've tried far (i've been using rubular): a.gsub(/\d[x]/,"23") <= grabs "x" s i'm close a.gsub(/\w[x{2}]/,"23") <= grabs "x" s grabs two digits each combination. is there easier way i'm not understanding? a.gsub(/\d{4} \d{4} \d{4} xxx\kxx/, '23') \d{4} = 4 digits what \k drop matched far. can use don't replace entire number, still able validate have in desired format.
Read more

jquery - Clone last and append item to closest class -

-
this bare-bones code on page: <div class="list-container"> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> </div> <p><button class="add-list-item">add</button></p> <div class="list-container"> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> </div> <p><button class="add-list-item">add</button></p> <di...
Read more

css - Can I use the :after pseudo-element on an input field? -

-
i trying use :after css pseudo-element on input field, not work. if use span , works ok. <style type="text/css"> .mystyle:after {content:url(smiley.gif);} .mystyle {color:red;} </style> this works (puts smiley after "buu!" , before "some more") <span class="mystyle">buuu!</span>a more this not work - colors somevalue in red, there no smiley. <input class="mystyle" type="text" value="somevalue"> what doing wrong? should use pseudo-selector? note: cannot add span around input , because being generated third-party control. :after , :before not supported in internet explorer 7 , under, on elements. it's not meant used on replaced elements such form elements (inputs) , image elements . in other words it's impossible pure css. however if using jquery can use $(".mystyle").after("add smiley here"); api docs on .after to ...
Read more