Menu
Here is a simplified version of my code. I am guessing I am not creating iDiv correctly because this line $('#iDiv').click(function(){ is never happening.
Not sure what I am doing wrong and would appreciate any suggestions to try.
Thanks!
$(document).ready(function() {
$('buttonx').click(function(){
createiDiv();
});
//this works great:
$('#iframeWrapper').click(function(){
var localiDiv = document.getElementById("iframeWrapper");
localiDiv.style.backgroundColor = "aqua";
});
// but iDiv is not recognized here and I can't figure out why
$('#iDiv').click(function(){
var localiDiv = document.getElementById("iframeWrapper");
localiDiv.style.backgroundColor = "lime";
});
});
function createiDiv(){
var iDiv = document.createElement('div');
var iframeWrapper = document.getElementById ('iframeWrapper');
iDiv.style.backgroundColor = "lime";
iDiv.id = 'iDivID'; - made change so this is = 'iDiv'
iDiv.style.width = "600px";
iDiv.style.height = "400px";
iframeWrapper.appendChild(iDiv);
}
</script>
</head>
<body>
<div id="iframeWrapper"></div>
</body>
645
asked Jan 26 '26 21:01
You need to set the element's id to the same value you then try to use in the jQuery selector:
iDiv.id = 'iDivID';
Should be
iDiv.id = 'iDiv';
Otherwise
$('#iDiv').click();
cannot work because a jQuery selector using $('#iDiv') explicitly looks for a DIV element with an id of iDiv (and not iDivID)
Of course, as another user mentioned in a comment, you need to actually call your createiDiv() function in order for the code within the function to be executed, by i assume you already know (and do) that (somewhere in code you have not posted).
Also you should incorporate the click handler after the element is created, not before. (I did not notice this mistake - user Felix Kling suggested it)
Hint
Since you're already using jQuery, you can optimize your code a bit so that it is more compact.
For instance you could change:
iDiv.style.backgroundColor = "lime";
iDiv.style.width = "600px";
iDiv.style.height = "400px";
to:
$('#iDiv').css({
'background-color': 'lime',
'width': 600,
'height': 600
});
Please note that unless you use an already reserved name for a variable, you don't have to put the keys (width, height, etc.) in quotes. You could also use backgroundColor instead of background-color as jQuery understands both. Bear in mind though that if you use the hyphen - in a key, you should place the key in quotes.
UPDATE
Here is some example on how you could apply the click handler after the element is generated:
function createiDiv(){
var iDiv = document.createElement('div');
var iframeWrapper = document.getElementById('iframeWrapper');
iDiv.id = 'iDiv';
iDiv.style.backgroundColor = "lime";
iDiv.style.width = "600px";
iDiv.style.height = "400px";
iframeWrapper.appendChild(iDiv);
$(iDiv).click(function(){
var localiDiv = document.getElementById("iframeWrapper");
localiDiv.style.backgroundColor = "lime";
}); // please note that you can use the DOM element `iDiv` in the jQuery selector (you don't have to use the ID if you have the actual element referenced in a variable)
}
And here is an example of the same function, but optimized for jQuery entirely:
function createiDiv(){
$('<div/>')
.attr('id', 'iDiv')
.css({
'background-color': 'lime',
'width': 600,
'height': 600
})
.click(function(){
$('#iframeWrapper').css('background-color', 'lime');
})
.appendTo('#iframeWrapper');
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
