Question

我正在使用一个使用jQuery(document).on()激活模态的插件。我在页面上有一堆模态。

如果我为每个模式打开/关闭手动创建.on，那么一切都可以正常工作

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');
  });

然而，这是一个托管页面，可能需要2,3或10个具有自己内容的模态。我正在尝试做我上面做的，只是动态的。这是我的尝试，我可以看出为什么它不起作用，但我不知道如何正确处理这个问题。

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');
    });
}

希望它可以让你知道我想要做什么？它甚至可能吗？

Answer 1

如果playerX是全局变量，您可以将代码重构为：

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

但我想你无论如何都不需要所有这些不同的playerX变量。最终，你的api()应该处理玩家ID，并且会像那样调用：

player.api(1, 'play');

编辑：好的，我在OP

中错过了这一部分

我正在使用插件

所以你不应该覆盖api()方法。

EDIT2：回答你的问题，使用闭包，你可以使用：

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

Answer 2

根据我的理解，你有动态元素，必须将事件绑定到它们。

您可以尝试这样的事情：

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>

动态创建必要的jQuery（文档）.on

2 个答案: