Dynamic element manipulation with jQuery

Question

I have an element being created dynamically by jquery fonticonpicker. I am attempting to manipulate the icon, yet simply using the code below does not work. .icons-selector i is created by the plugin, dynamically.

I have always been successful at manipulating an element by merely writing my selector starting with an element that already existed i.e.: body or document. Can someone shed some light and alternate options to solve this problem please?

The goal is that I NEED the element to be modified after being loaded. No user action is required.

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

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

Only when I have created another element on the page and added a click event to it, then clicked it.. does it finally style the

This works:

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

have you kept this code after your plugin has finished creating dynamic elements. — Manoj, Sep 07 '17 at 15:52
@ManojYadav yes I did think of that, and placed the code after the plugin code is run. But shouldn't document.ready wait for the whole thing to load anyway? — Rogelio, Sep 07 '17 at 17:05
yes it should but what in case your plugin also wait for document.ready() function. any ways document.ready waits for DOM creation and not dom manipulation. in this case your library is manipulation so please try it. — Manoj, Sep 07 '17 at 17:51

score 2 · Answer 1 · answered Sep 08 '17 at 11:47

This is not a good solution. Still if you have no other work around's, then use it.

This method uses a intervel function with checks for the existence of the element add add the css when available. Once the element is available the intervel function gets cleared off.

Note: Its assumed that, you will always render the icon(async). Otherwise we need to prevent the infinite intervel excecution.

$(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>

score 1 · Answer 2 · answered Sep 07 '17 at 15:55

1

This is because on document.ready the element is not in the DOM.

Try:

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

That will apply css modifier when element gets loaded and ready to be modified. See docs: https://api.jquery.com/load-event/

answered Sep 07 '17 at 15:55

Marçal Berga

305
1
11

Thanks Marcal, but that function seems to have been deprecated in 1.8 from what I am reading. Also tried it and it did not work. – Rogelio Sep 07 '17 at 16:08
Check this topic, maybe some of the propposals works on your case: https://stackoverflow.com/questions/6386128/how-can-i-call-a-function-after-an-element-has-been-created-in-jquery – Marçal Berga Sep 07 '17 at 22:12

Dynamic element manipulation with jQuery

2 Answers2