javascript - 使用 jQuery 进行动态元素操作

Question

我有一个由 jquery fonticonpicker 动态创建的元素。我正在尝试操作该图标，但仅使用下面的代码是行不通的。 .icons-selector i 由插件动态创建。

我总是通过仅从已经存在的元素(即正文或文档)开始编写选择器来成功地操作元素。有人可以提供一些线索和替代选项来解决这个问题吗？

目标是我需要在加载后修改元素。无需用户操作。

$(document).ready(function(){
    iconContainerID = "id_12";
    $('body #' + iconContainerID).css('background', 'red'); // this works!

    $('body #' + iconContainerID + ' .icons-selector i').css('background', 'yellow'); // this doesnt work
});

只有当我在页面上创建另一个元素并向其添加单击事件，然后单击它时......它最终才会设置样式

这有效:

<a href="" id="clickme">click me</a>

$(document).on('click', '#clickme', function(){
    iconContainerID = "id_12";
    $('body #' + iconContainerID + ' .icons-selector i').css('background', 'yellow'); // this does work
});

Answer 1

这不是一个好的解决方案。不过，如果您没有其他解决办法，请使用它。

此方法使用 intervel 函数来检查元素是否存在，并在可用时添加 css。一旦元素可用，间隔函数就会被清除。

注意:假设您将始终渲染图标(异步)。否则我们需要防止无限间隔执行。

$(function() {
  AppendAfter5Secs();
  AddRequiredCssAfterLoading();
});

function AppendAfter5Secs() {
  setTimeout(function() {
    var div = $('<div id="id_12">');
    div.append($('<div class="icons-selector"><i>Myicon</i><div>'));
    $('#dvContainer').append(div);
  }, 5000);
}

function AddRequiredCssAfterLoading() {
  var iterationCount = 1;
  var Intr = setInterval(function() {
    console.log(iterationCount++);
    var iconContainerID = "id_12";
    if ($('body #' + iconContainerID + ' .icons-selector i').length > 0) {
      $('body #' + iconContainerID + ' .icons-selector i').css('background', 'yellow');
      clearInterval(Intr);
    }
  }, 1000);
}

#id_12 {
  width: 80px;
  height: 50px;
  background: red;
}

.icons-selector i {
  width: 30px;
  height: 30px;
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dvContainer">

</div>