Ie Not Allowing Onclick Event on Dynamically Created Dom 'A' Element

IE not allowing onClick event on dynamically created DOM 'a' element

Event handlers are not DOM attributes, the attribute exists in markup only - I'm not sure why FF oks this. I'll go research that now cause I want to know.

Update: seems to be mixed feelings about whether eventhandlers are DOM-valid attributes or not. Looks to me like this is MS's fault as they internally do not treat them as attributes, whilst the HTML spec indicates that they very much are. The direct consequences of this are that a number of things !IE would consider attributes cannot be set with setAttribute in IE including eventhandler bindings and importantly also style, class and name. apparently IE8 fixes this but I still haven't installed that so I can't check.

Meanwhile, for event binding use the addEventListener/attachEvent pair instead, or (less preferably because it's a direct assignment) set a.onclick directly to your target method (or more likely a closure on your method).

To fix your styling not being correctly applied use element.style = foo; or (better) element.className = bar.

Essentially the problem is setAttribute. Avoid using it.

For reference...

Attach event to dynamic elements in javascript

This is due to the fact that your element is dynamically created, so it is attached to the DOM later, but your addEventListener call already occurred in the past.
You should use event delegation to handle the event.

document.addEventListener("click", function(e){
  const target = e.target.closest("#btnPrepend"); // Or any other selector.

  if(target){
    // Do something with `target`.
  }
});

closest ensures that the click occurred anywhere inside the target element or is the target element itself.
This is useful if, for example, instead of your <input id="btnPrepend"/> you had a <button id="btnPrepend"><i class="icon">+</i> prepend</button> and you clicked the <i class="icon">+</i>.

jQuery makes it easier:

$(document).on("click", "#btnPrepend", function(){
  // Do something with `$(this)`.
});

Here is an article about event delegation.

Event binding on dynamically created elements?

As of jQuery 1.7 you should use jQuery.fn.on with the selector parameter filled:

$(staticAncestors).on(eventName, dynamicChild, function() {});

Explanation:

This is called event delegation and works as followed. The event is attached to a static parent (staticAncestors) of the element that should be handled. This jQuery handler is triggered every time the event triggers on this element or one of the descendant elements. The handler then checks if the element that triggered the event matches your selector (dynamicChild). When there is a match then your custom handler function is executed.

---

Prior to this, the recommended approach was to use live():

$(selector).live( eventName, function(){} );

However, live() was deprecated in 1.7 in favour of on(), and completely removed in 1.9. The live() signature:

$(selector).live( eventName, function(){} );

... can be replaced with the following on() signature:

$(document).on( eventName, selector, function(){} );

---

For example, if your page was dynamically creating elements with the class name dosomething you would bind the event to a parent which already exists (this is the nub of the problem here, you need something that exists to bind to, don't bind to the dynamic content), this can be (and the easiest option) is document. Though bear in mind document may not be the most efficient option.

$(document).on('mouseover mouseout', '.dosomething', function(){
    // what you want to happen when mouseover and mouseout 
    // occurs on elements that match '.dosomething'
});

Any parent that exists at the time the event is bound is fine. For example

$('.buttons').on('click', 'button', function(){
    // do something here
});

would apply to

<div class="buttons">
    <!-- <button>s that are generated dynamically and added here -->
</div>

javascript function working in chrome but not working in IE8

According to the first answer here -- IE not allowing onClick event on dynamically created DOM 'a' element -- IE8 does not bind click event handlers automatically when the onclick attribute of an element is changed dynamically. That is, you're setting the onclick attribute of your tag in HTML, but the browser isn't converting that attribute into an actual event handler.

Try replacing

remove.setAttribute("onclick", "Remover("+ val +")");

with

var removeFunc = function() { Remover(val) };
if (!remove.addEventListener) //Old IE
  remove.attachEvent("onclick", removeFunc);
else //Other browsers
  remove.addEventListener("click", removeFunc );

That actually binds the click event handler directly, rather than setting the attribute in the expectation that the browser will react by binding it.

Click event doesn't work on dynamically generated elements

The click() binding you're using is called a "direct" binding which will only attach the handler to elements that already exist. It won't get bound to elements created in the future. To do that, you'll have to create a "delegated" binding by using on().

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.

^Source

Here's what you're looking for:

var counter = 0;
$("button").click(function() {    $("h2").append("<p class='test'>click me " + (++counter) + "</p>")});
// With on():
$("h2").on("click", "p.test", function(){    alert($(this).text());});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><h2></h2><button>generate new element</button>

Click event do not work to child elements of dynamic created element

All of the answers have excellent advice for you, but they may have missed the problem. In fact, Ludovico gave you the answer but it was quietly included with his other very useful information so perhaps you missed it.

You are encountering something called event delegation. That means, items newly added into the DOM do not have click bindings associated with them (even though you defined them in code) because they were not in the DOM when the click events were bound to the appropriate elements.

(Note that "the DOM" is basically the living webpage as it appears on your screen - with all real-time mods from javascript, etc. So it is more than just the HTML code.)

Very simple to solve this, using jQuery.

Instead of:

$('#myID').click(function(){
    //your code here
});

do this instead:

$(document).on('click', '#myID', function(){
    //your code here
});

What this does is bind the click event to something that does exist at the time the DOM is rendered (i.e. the "document" object) - and jQuery's .on() method now watches the DOM for anything else being inserted. If any new element matches the specified element, then the click event is bound to that element whenever it appears in the DOM.

References:

https://learn.jquery.com/events/event-delegation/

https://api.jquery.com/on/

http://jqfundamentals.com/chapter/events

click event not firing in IE11

Taken from the comments:

You are actually only creating the element, without adding it to the DOM. You can add it to the DOM with: document.body.appendChild(fileSelector);

And in the selectAvatar function:

function selectAvatar()
{

    var fileSelector = document.createElement('input');
    fileSelector.setAttribute('type', 'file');
    fileSelector.setAttribute('accept', "image/gif, image/jpeg");

    document.body.appendChild(fileSelector);

    // do stuff
}

Also здрасти

---

Related Topics