duanci19881003 2010-12-16 15:59
浏览 98
已采纳

如何在IE8中的jQuery ajax加载内容中启动javascript

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

  • 写回答

1条回答 默认 最新

  • drci47425 2010-12-16 16:09
    关注

    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.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 运筹学中在线排序的时间在线排序的在线LPT算法
  • ¥30 求一段fortran代码用IVF编译运行的结果
  • ¥15 深度学习根据CNN网络模型，搭建BP模型并训练MNIST数据集
  • ¥15 lammps拉伸应力应变曲线分析
  • ¥15 C++ 头文件/宏冲突问题解决
  • ¥15 用comsol模拟大气湍流通过底部加热（温度不同）的腔体
  • ¥50 安卓adb backup备份子用户应用数据失败
  • ¥20 有人能用聚类分析帮我分析一下文本内容嘛
  • ¥15 请问Lammps做复合材料拉伸模拟，应力应变曲线问题
  • ¥30 python代码，帮调试，帮帮忙吧