0

In the document ready function, I add webpage content dynamically. After this content is added, I would like to select one of the added elements, and change the width. However, jquery does not select these new added elements at this point in the ready function. Only after document ready is finished, am I able to select those elements and work with them. Is there a solution to this?

Rowan Gontier
  • 821
  • 9
  • 14
  • Add your code & html, and people will help you up with the problem. – Frenchi In LA Sep 02 '16 at 18:10
  • Your problem have solution. But we need your code. –  Sep 02 '16 at 18:12
  • You might want to look at [event delegation](https://learn.jquery.com/events/event-delegation/) – empiric Sep 02 '16 at 18:13
  • 1
    Possible duplicate of [JQuery: Selecting dynamically created elements and pushing to Firebase](http://stackoverflow.com/questions/17561243/jquery-selecting-dynamically-created-elements-and-pushing-to-firebase) – empiric Sep 02 '16 at 18:16
  • Basically, I load content from another webpage on page ready, and aim to put it into a div in my current webpage. I have this function below in the webpage head, after removing irrelevant code: function loadContent() { $("#content").load("desktop.html"); } I then have this: $( document ).ready(function() { loadContent(); sizeAll(); // This does not work, unless I have a click event, which I fire by mouse click after page is loaded. }); The sizeAll function looks like this: function sizeAll() { var newSizeWidth = $(window).width(); $("#desktop").width(newSizeWidth); } – Rowan Gontier Sep 03 '16 at 10:43
  • I tried adding the following, but it did not work: $(document).on('change', '.desktop', function() { $("#desktop").width(500); }); I made sure that the desktop.html page has a "class=desktop" in the desired div, and of course the div also has a "id=desktop". – Rowan Gontier Sep 03 '16 at 10:43
  • add the code to your question using the "edit" link – Shiran Dror Sep 03 '16 at 16:00

4 Answers4

1

Instead of $(document).ready(function() {}); you can use $(document).on('event' 'selector', function() {});

for instance:

$(document).on('click', '.added_item_class', function() { 
 $(this).hide; 
});

or

$(document).on('change', '.added_items', function() { 
 $('#item_row').text('blabla');
});

This way it doesn't require the DOM to be loaded in order for your jQuery to work.

For further reference you can check out the jQuery on method documentation here.

EDIT

Try this ;

$(document).on('change', '.desktop', function() {  
            $('#desktop').css({"width":"500"}); 
    });
luissimo
  • 916
  • 2
  • 10
  • 31
0

you need to put the select in a function and call it after data gets appended

Parithiban
  • 1,656
  • 11
  • 16
0

Use ajax/get/post/ call in this manner:

$.get("somepage.html", function(data) {
  // Use "data" this way
  $(data).find("anySelector");
  // And set correct type, just for sure
}, "html");
0

Tried a number of ways, as suggested by contributors, but none worked.Found a solution- when the content is loaded from the "desktop.html" page into the div id="content" of the current webpage, I place the resize width function inside the completion handler. See below: $( "#content" ).load( "desktop.html", function() { sizeAll(); // resize function code placed here });

Rowan Gontier
  • 821
  • 9
  • 14