Home/ Questions/Q 3594488
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T19:43:13+00:00

I’m facing a trouble with jquery ajax under IE8. I have a form which

  • 0

I’m facing a trouble with jquery ajax under IE8. I have a form which at the base level displays a list of few items, each with buttons to edit and remove. The list, along with those two buttons, is loaded via jquery ajax call. Although it works fine on Firefox and Chrome, on IE8 it won’t trigger functions behind edit or remove buttons.

So basically, on a base page, jquery works and loads the list. Within that list tho, jQuery doesn’t work as it won’t trigger edit or remove functions

I have a similar problem with the modal window call. IE8 is able to open the modal window (content is loaded with jquery ajax) but won’t trigger any function within the content of the modal

Example of a simple call

$('#form-modal').load('/form/' + path + '?id=' + id).modal();

This works on IE8 from the base page, but doesn’t when triggered within ajax-loaded content

All js scripts definitions are being loaded in the <head> of the main base page. I tried adding definition to the ajax-loaded file header, but didn’t help so it must be something else

Any ideas? If you need more details, will gladly provide

Let me show you the easiest example. Each item on the list loaded with ajax has a ‘remove’ button. 

<a href="#" onclick="deleteItem('itemId')">Remove</a>

DeleteItem definition is in external lib.js file

function deleteItem(id){

            $.ajax({
               type: "POST",
               url: "/ajax/deleteitem.php",
               data: "id=" + id,
               success: function(msg){
               loadItemsList();
               }
            });
}

This is it… That simply doesn’t work on IE8… Nothing happens, not even javascript error. Same thing works no problem on Firefox and Chrome

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It would be nice if you show the event handlers for those buttons, since if you’re using bind(); for example, it loads when the dom is ready, and your ajax call is made. That means that the dom elements loaded through the ajax call wasn’t there when bind was called to bind the buttons.

    The solution to this is to use live();

    $(".button").live("click", function () {
  // do stuff
});

    I don’t know what event binder you’re using, but if you’re using anything other than live, you could try live and it should work.

    EDIT

    Read my comment first on the alert(id), if your function doesn’t run at all in IE8, try doing this instead. Give the link element the id instead like this

    <a id="item_10" href="#">Remove</a>

    Then somewhere in your javascript

    $("document").ready( function () {
   $("a").live("click", deleteItem);
});

function deleteItem (event) {
   event.preventDefault();
   var id;
   id = $(this).attr("id").replace("item_", "");

   //this will now provide you with the current id
   console.log(id);

   your ajax-stuff here..

}

    This should work in IE8, no problem. You might wanna specify the selector though for the click event by giving all the delete links some class or something.

    • 0