jquery declare element before it's loaded

Question

I use templates in script tags. In javascript "class" first i'm declaring all elements I will work with. And if some elements will be added from template - they wont work.

<script type="text/template" id="new">
    <div id="el">Yo</div>
</script>

<div id="container">
    <button id="go">Paste here</button>
</div>

var $el = $('#el'),
goBtn = $('#go'),
$container = $('#container'),
newTpl = $('#new');

goBtn.on('click', function(){
  $container.html(newTpl.html());
  alert($el.length); // return 0!
});

https://jsfiddle.net/0fat5htg/ So how to declare all possible elements before they are loaded?

@ Sergey Kudryashov `fiddle link should have something written in it` — ozil, Apr 22 '15 at 07:53
How are the elements added? On page load? AJAX? Declaring them outside of the `click` handler is good, but may be better to move them inside it depending on how you generate your templates. — CodingIntrigue, Apr 22 '15 at 08:02
How abt `$el = $(newTpl.html());`? Unless, the element with said ID is loaded in DOM, you cannot reference it. — Sandeep Nayak, Apr 22 '15 at 08:20
So how to declare elements in the beginnig of the code, not in the middle? — Sergey Kudryashov, Apr 22 '15 at 08:26
You might want to take a look at this [question](http://stackoverflow.com/questions/2844565/is-there-a-jquery-dom-change-listener). But why can't you re-select desired elements? — Artyom Neustroev, Apr 22 '15 at 08:37

score 0 · Answer 1 · answered Apr 22 '15 at 08:37

0

I don't know exactly your requirements, but you can actually try this:

var $el = '',
    goBtn = $('#go'),
    $container = $('#container'),
    newTpl = $('#new');

goBtn.on('click', function(){
  $container.html(newTpl.html());
  $el = $('#el'); //redefining $el variable 
  alert($el.length);
});

Fiddle:

https://jsfiddle.net/hfhLpuc3/2/

answered Apr 22 '15 at 08:37

Mário Areias

411
4
7

Sergey, does that answer help? I would like to know if I was able to help you :) – Mário Areias Apr 23 '15 at 06:27

score 0 · Answer 2 · answered Apr 22 '15 at 08:45

0

You can't define the global variables this way, but the event handler can be bound with:

$(document).on("click", "#go", function() {
...
});

It will work event if the #go markup is added afterwards.

answered Apr 22 '15 at 08:45

Maurice Perry

32,610
9
70
97

jquery declare element before it's loaded

2 Answers2