#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    12
    Rep Power
    0

    Jquery selector on dynamically created element


    I have a dynamically created div, and I want to add a few buttons to the div when it is clicked on, via the function below:

    Code:
    function show_menu(circle)
    {
    	var button = document.createElement("button");
    
    	button.observation_id = circle.observation_id;
    	button.type = "button";
    	button.className = "box_button";
    
    	// button.style.top = circle.style.top;
    	// button.style.left = circle.style.left;
    
    	switch(circle.state)
    	{
    		case 'start':
    			button.onclick = function() { cancel_session(button); };
    			button.innerHTML = "Cancel";
    			break;
    		case 'end':
    			button.onclick = function() { restore_session(button); };
    			button.innerHTML = "Extend";
    			break;
    		case 'in session':
    			button.onclick = function() { end_session(button); };
    			button.innerHTML = "End";
    			break;
    	}
    
    	button.style.visibility = "visible";
    
    	$("#active_stays").append(button);
    	alert(circle.name); // returns "vehicle_spot"
    	alert($("[name='vehicle_spot']").length(; // returns 0
    }
    Why is the jquery selector in the last alert returning 0? The element ("circle") was created earlier using createElement and is appended to the document.

    Any assistance?

    Thank you!
  2. #2
  3. No Profile Picture
    Lost in code
    Devshed Supreme Being (6500+ posts)

    Join Date
    Dec 2004
    Posts
    8,301
    Rep Power
    7170
    jQuery has no problem accessing dynamically created elements. What code did you use to create circle?
    PHP FAQ

    Originally Posted by Spad
    Ah USB, the only rectangular connector where you have to make 3 attempts before you get it the right way around
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    12
    Rep Power
    0
    Originally Posted by E-Oreo
    jQuery has no problem accessing dynamically created elements. What code did you use to create circle?
    Sure - here's the creation code (it's within the context of a jquery .post() )

    Code:
    var vehicles = eval(data);
    
    for(var i = 0; i < vehicles.length; i++)
    {
    	circle = document.createElement('div');
    	circle.name = 'vehicle_spot';	
    	circle.className = "box";
    	circle.observation_id = vehicles[i].observation_id;
    	circle.style.top = vehicles[i].img_y_coord + image.offsetTop - 10 + 'px';
    	circle.style.left = vehicles[i].img_x_coord + image.offsetLeft - 10 + 'px';
    	circle.onclick = function() { show_menu(this) };
    
    	// now draw it
    	$("#active_stays").append(circle);
    }
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    50
    Rep Power
    35
    According to http://stackoverflow.com/questions/6...tting-div-name a div element can't have a 'name' attribute so I'd suggest using 'id' or 'title' instead.

    try changing
    Code:
    circle.name = 'vehicle_spot';
    to
    Code:
    circle.id = 'vehicle_spot';
    and
    Code:
    alert(circle.name); // returns "vehicle_spot"
    alert($("[name='vehicle_spot']").length(; // returns 0
    to
    Code:
    alert(circle.id);
    alert($("#vehicle_spot").length;
    Or it could be that you have an extra '(' at the end of length, who knows.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    12
    Rep Power
    0
    Originally Posted by Edge360
    According to http://stackoverflow.com/questions/6...tting-div-name a div element can't have a 'name' attribute so I'd suggest using 'id' or 'title' instead.

    try changing
    Code:
    circle.name = 'vehicle_spot';
    to
    Code:
    circle.id = 'vehicle_spot';
    and
    Code:
    alert(circle.name); // returns "vehicle_spot"
    alert($("[name='vehicle_spot']").length(; // returns 0
    to
    Code:
    alert(circle.id);
    alert($("#vehicle_spot").length;
    Or it could be that you have an extra '(' at the end of length, who knows.
    That's just a typo. Also I can't use ID because 'circle' is dynamically created and there can be many of them on a page.

    in other news, can jquery select a dom element created with createElement? ie; would something like:

    Code:
    var x = document.createElement("div");
    var y = $(x);
    work?
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    50
    Rep Power
    35
    Sure, jQuery is written in javascript so they can be mixed, your example would work as long as your div was added to the DOM before accessing it with jQuery.

    If you can't use 'id' then 'title' might be the way to go, checkout this jsFiddle
    Code:
    var x = document.createElement("div");
    x.title = "myDivTitle";
    
    $("#myResultDiv").append(x);
    
    var y = $("[title='myDivTitle']");
    alert(y.attr("title"));
    Alternatively if you're using HTML5 you can use your own custom data attribute, like in this jsFiddle
    Code:
    var x = document.createElement("div");
    x.setAttribute("data-name", "myDivName");
    
    $("#myResultDiv").append(x);
    
    var y = $("[data-name='myDivName']");
    alert(y.attr("data-name"));

IMN logo majestic logo threadwatch logo seochat tools logo