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

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

这有效：

<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（可用时）。一旦元素可用，就可以清除intervel函数。

注意：假设您将始终呈现图标（异步）。否则我们需要阻止无限级别的执行。

＆＃13;

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

＆＃13;

#id_12 {
  width: 80px;
  height: 50px;
  background: red;
}

.icons-selector i {
  width: 30px;
  height: 30px;
  background: green;
}

＆＃13;

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

＆＃13;

Answer 2

这是因为在document.ready上元素不在DOM中。

尝试：

$('body #' + iconContainerID + ' .icons-selector i').load(function(element) {
   $(element).css('background', 'yellow');
});

当元素被加载并准备好被修改时，这将应用css修饰符。请参阅文档：https://api.jquery.com/load-event/

使用jQuery进行动态元素操作

2 个答案: