Dynamically create necessary jQuery(document).on

Question

I'm using a plugin that uses jQuery(document).on() to activate a modal. I have a bunch of modals on the page.

If I manually create an .on for each modal opening/closing everything works as

jQuery(document).on('opened', '[data-remodal-id=modal-1]',
  function() {
    player1.api('play')
  });

jQuery(document).on('closed', '[data-remodal-id=modal-1]',
  function(e) {
    player1.api('unload')
  });

jQuery(document).on('opened', '[data-remodal-id=modal-2]',
  function() {
    player2.api('play');
  });

jQuery(document).on('closed', '[data-remodal-id=modal-2]',
  function(e) {
    player2.api('unload');
  });

However this is a managed page, that could need 2,3 or 10 modals with their own content. I'm trying to do what I did above, only dynamically. Here's my attempt, and I can see why it doesn't work, but I have no idea how to approach this properly.

var countPlusOne;
for (i=0;i<players.length;i++){

    countPlusOne=i+1;
    var dataSelector = '[data-remodal-id=modal-'+countPlusOne+']';

    jQuery(document).on('opened', dataSelector, function () {
      players[i].api('play');
    });

    jQuery(document).on('closed', dataSelector, function (e) {
      players[i].api('unload');
    });
}

Hopefully it gives you some idea of what i'm trying to do? Is it even possible?

The issue is that the value of `i` inside the closure is not what is expected, so I agree with @Juhana about which other question to refer to — Chris Lear, Dec 11 '15 at 10:33
@Juhana Thank you, it was closures, I thought it was going to be more complicated than that, thanks for pointing me in the right direction. — Mike Srt, Dec 11 '15 at 12:39

A. Wolff · Answer 1 · 2015-12-11T11:01:19.910

If playerX are global vars, you could refactorize your code to this:

jQuery(document).on('opened closed', '[data-remodal-id]', function (e) {
  window["player" + $(this).data("remodalId").replace('modal-' ,'')].api(e.type === "opened" ? 'play' : 'unload');
});

But i guess you don't need all this different playerX variables anyway. Ultimately, your api() should handle player id and it would be called like that e.g:

player.api(1, 'play');

EDIT: Ok i'm miss this part in OP

I'm using a plugin

So you shouldn't override api() method.

EDIT2: to answer your question, using closure, you could use:

var countPlusOne;
for (i = 0; i < players.length; i++) {
  (function(i) {
    countPlusOne = i + 1;
    var dataSelector = '[data-remodal-id=modal-' + countPlusOne + ']';

    jQuery(document).on('opened', dataSelector, function() {
      players[i].api('play');
    });

    jQuery(document).on('closed', dataSelector, function(e) {
      players[i].api('unload');
    });
  })(i);
}

score 0 · Answer 2 · answered Dec 11 '15 at 10:35

Per my understanding, you have dynamic elements and have to bind events to them.

You can try something like this:

var count = 1;
function addInput(){
 var content = document.getElementById("content");
  var input = "<input id='txt_"+count+"' class='input'>";
  count++;
  content.innerHTML+=input;
}

function registerEvents(){
 $(document).on("blur", ".input", function(){
   console.log($(this).attr("id"));
  })
}
registerEvents();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="content"></div>
<button onclick="addInput()">Add input</button>

Dynamically create necessary jQuery(document).on

2 Answers2