We Keep Coding

Bind onclickevent for a dynamically added jQuery element

Could you please advise how to bind a onclick function for a dymanically added iframe element in JQuery.
The situation is like - I have got 4 radio buttons. Whenever somebody is selecting the second radio button I am loading one iframe and there is a button in that iframe where I need to have one onclick function from an external JS file.
on page load $("#iframe").length = 0, so could not use the $("#iframe").find method.
Please advise
Thanks,
Aniket

Find the iFrame with a valid selector and use .contents() to get its content.
var iframe = $('#your_iframe').contents();
iframe.find('your_clicable_item').click(function(event){
console.log('work fine');
});

How to click a save as html link with changing ID's?

I know how to click a link using javascript,
document.getElementById('yourLinkID').click();
But what if your ID is always changing or you are not sure what your ID is going to be? I have a html link that auto generate from a grid of data into a excel file that once i click on will give me a link "CLICK" and then it will save to your file. Any idea's or any other way of click a html link?
Here is an example html:
Click

You can use class for that kind of button, but when you slect $('.class-name') it you can cause clicking on multiple links.
Other solution is to traverse DOM (ie. using jQuery)
https://api.jquery.com/category/traversing/tree-traversal/
You can use this function to move between your elements:
$( "li" )
.closest( "ul" )

If you have only one elemement like this you can use querySelector function:
document.querySelector('[id^=myIdIsAlwaysChanging]').click();
if you have more then one element you will need to use document.querySelectorAll and iterate over the list.

Bind an event outside of DOM ready?

I'm trying to append a div to all dynamically added divs to my page using this code:
$('.tagged .post').append('<div class="fadeout"></div>');
but I simply cannot get it to work. So I was thinking, would it be possible to bind this outside of $(document).ready() somehow, so the code looks for all the elements that match the selector and append the "fadeout" div to them?

Edit: Check out this answer: Event when element added to page
Long story short, you have two options:
Continually check for the elements
Use Mutation Observers
The answer I linked to above has more details.

How can I remove an element in Javascript without jQuery

Im trying to remove a Div from the DOM via an <a> tag nested within it.
I guess what I am looking for is the pure Javascript version of jQuery's
$('div').remove()
Here's the html set up
<div> Click me to remove the parent div</div>
Thanks ahead of time. :D

You could define this function
function remove(element) {
element.parentNode.removeChild(element);
}
and use it as
<div>
...
</div>
Reference: Node.parentNode, Node.removeChild
Further notes:
You better use a <button> instead of a link (<a>) for this kind of behaviour. A link has a distinct semantic meaning, it has to link somewhere. You can use CSS to style the button accordingly.
Event handlers are better added via JavaScript itself and not as an HTML attribute.

How can I apply prototype's toggle to content loaded via JSON, IE problem only

I use PHP and javascript via prototype.
i have a threaded comments page that on open
by default via javascript call to a PHP file data returned via JSON, only parent comments are retrieved in the db. (in short only parent comments are fetched from db and displayed)
then the parents are loaded and formatted to be shown on the page with a link to get and display its child comments, link example:
<span id="moreparent8351" onclick="insertChildDiv('parent8351')">1 Replies and more</span>
the span link above calls the javascript function "insertChildDiv()" that basically gets comments whose parent_id=parent8351, also using a PHP file that returns data via JSON to the javascript that dynamically inserts this child comments nested under its parent comment.
then the span link above using prototype transforms into:
<span id="moreparent8351" onclick="$('childparent8351').toggle()">1 Replies and more</span>
now here is the problem, this inserted content inside this div with id=childparent8351 wont respond to the hide/show toggle ONLY in IE v6,v7 and v8. other browsers work fine.
it looks like IE cannot apply the hide/show toggle to a dynamically inserted content.
I tried hardcoding the inserted content that i see in fogbugz to the page and testing it again on IE, guess what? toggle works!
I dont want to fetch all the comments both parent and child and then hide the child comments, that is a waste of resources on something that we are not sure is important or to be read by the users.
Is there a workaround? if there is none, then i hope this post will help others on their design stage for something similar.

Element.toggle() should work fine with dynamically generated content. Your problem most likely lies within the method you use to generate this content.
You stated:
then the span link above using
prototype transforms into:
<span id="moreparent8351" onclick="$('childparent8351').toggle()">1 Replies and more</span>
How exactly are you changing the onclick attribute of the span element?
First of all, I definately would not recommend changing an onclick event on-the-fly. It is probably better to use one function that checks the current state of what you are trying to do and executes the appropriate code.
Be sure not to "transform" your span element, including the onclick attribute using innerHTML. Chances are the DOM is still trying to reference a function that you have just removed. If updating your onclick attribute at all, do it like this:
var element = $('moreparent8351');
// this automatically removes previous onclick handlers set in this manner
element.onclick = function() { // do stuff };
...or, when you want to it the Prototype way:
var element = $('moreparent8351');
// OPTIONAL: remove previous handler, if set
element.stopObserving('click', my_cool_function());
// attach new handler
element.observe('click', function() { // do stuff });