How to bind a javascript function to dynamically added Element on DOM?

Question

I am trying to use some use-full JavaScript code I found in codrop for creating custom select box, but i'm failing to bind this javascript function

(function() {
        [].slice.call( document.querySelectorAll( 'select.cs-select' ) ).forEach( function(el) {
            new SelectFx(el);
        } );
    })();

to dynamically added element.

Demo Code : http://codepen.io/AnandAyan/pen/rVpGPJ

I don't know what the issue is here. Are you saying that the `select.cs-select` element is added sometime after this code runs? If so, then naturally it's not going to be available to be affected. You'd need to run `new SelectFx(new_elem)` when you create it. — , Jun 28 '15 at 18:25
there's no click or some event so you don't need event delegation method, should work fine. there's something wrong other than event delegation — Bhojendra Rauniyar, Jun 28 '15 at 18:26
...and FYI, you don't need to `.slice()` the collection first. It's just wasting resources. Just do `[].forEach.call(document.querySelectorAll(...), function(el) {...});` — , Jun 28 '15 at 18:28
You should really have all relevant code directly in the question. In the code that creates the new element, change it so that it's `var new_elem = $("").appendTo(".container");` And then get the raw element and apply the function `new SelectFx(new_elem[0]);`. Depending on your HTML structure, it could be that you'd need to use `new_elem.find(...)` or `new_elem.filter(...)` first. — , Jun 28 '15 at 18:35

Abijeet Patro · Answer 1 · 2015-06-28T18:50:49.473

2

Let's introduce jQuery .on

$('body').on('click', '.cs-select', function(event) {
  console.log('I fired!!!');
  new SelectFx(this);
});

$('.add').click(function() {
  $('.container').append('<select class="cs-select cs-skin-elastic"><option value="" disabled selected>Select a Country</option><option value="france" data-class="flag-france">France</option><option value="south-africa" data-class="flag-safrica">South Africa</option></select>');
});

http://codepen.io/anon/pen/VLyMJO

But you probably want to trigger a function on the change though right?

UPDATED based on the comment discussion below with what I think is correct. Thanks @squint.

$('.add').click(function() {
  var $newElement = $('<select class="cs-select cs-skin-elastic"><option value="" disabled selected>Select a Country</option><option value="france" data-class="flag-france">France</option><option value="south-africa" data-class="flag-safrica">South Africa</option></select>');

  $('.container').append($newElement);
  new SelectFx($newElement[0]);
});

edited Jun 28 '15 at 18:50

answered Jun 28 '15 at 18:15

Abijeet Patro

2,842
4
37
64

1

I see no indication in the question that he's using jQuery. – Jun 28 '15 at 18:23
@squint - check out the `.click` handler and the `.append`. It's in the **DEMO code link**. – Abijeet Patro Jun 28 '15 at 18:25
Far as I'm concerned, off-site info isn't relevant to the question. But even if he is using it, I don't know what binding a `click` handler has to do with the code in the question. – Jun 28 '15 at 18:26
@squint - It means he is using jQuery and he can use `.on` to attach events to the dynamically added element? He specifically states - **i'm failing to bind this javascript function to dynamically added element.** Also I've requested that the demo code link be added to the question itself. – Abijeet Patro Jun 28 '15 at 18:28
That doens't mean he wants to run the function in question on a click event. I think you're reading too much into his use of the word "bind". – Jun 28 '15 at 18:29
i dont have any event handler , insted of calling new SelectFx(new_elem) every time is there any other way that i can call it just once ? – Äñäñd Ayan Jun 28 '15 at 18:30
@ÄñäñdAyan - Possible, but when do you want to call it once? – Abijeet Patro Jun 28 '15 at 18:31
@ÄñäñdAyan: As I noted above, pass the new element to `SelectFX` when you create it. There's no good automatic way to do it upon creation. – Jun 28 '15 at 18:32
Im usally want to call when the main page is loaded ,I was just wondering was it possible that document.querySelctor() can look for dynamically added elements on DOM ,since the selector is looking into document and elements aren't there the function is failing – Äñäñd Ayan Jun 28 '15 at 18:34
Well, when the main page is loaded, the `cs-select` elements aren't present are they? We're adding then when we click on the button **Add** and by then the `document.querySelector()` has already run... – Abijeet Patro Jun 28 '15 at 18:36
1

@ÄñäñdAyan: The only way to distinguish new ones from original ones is if you give them some property like a class to distinguish them. But you just don't need to do this. You have the element right there in your possession when you create the new one, so just apply the function at that time. – Jun 28 '15 at 18:38
1

@squint - You were right, I did read into the question incorrectly. He probably wants to call `new SelectFx(el)` when the user clicks on the **Add** button. – Abijeet Patro Jun 28 '15 at 18:42

How to bind a javascript function to dynamically added Element on DOM?

1 Answers1