IE中的JQuery错误，在FF中可以正常工作。可能与live有关。

Question

我有一个ASP.net MVC2应用程序。我使用JQuery来更改所有表格行，以便我可以在任何行的任何位置单击以触发单击事件，从而触发所单击行中的链接。

这些表格是使用MVC的内置PartialView Ajax创建的。

以下是我的JQuery脚本。

<script type="text/javascript">

        $(document).ready(function () {
            $('table tr').live('click',function (event) {
                $('#asplink', this).trigger('click');
            })
            .live('mouseenter',function (event) {
                this.bgColor = 'lightblue';                    
            })
            .live('mouseleave', function (event) {
                this.bgColor = 'white';
            });

        });

</script>

这是创建表格的局部视图代码的第一部分。

<% foreach (var item in Model.JobHeaderData)
   { %>

    <tr>
        <td>
            <a id="asplink" href="http://localhost/sagstyring/EditJob.asp?JobDataID=<%: item.JobDataId %>&JobNumId=<%: item.JobNumID%>&JobNum=<%: item.JobNumID%>&DepId=1&User_Id=<%:ViewData["UserId"]%>" onclick="window.open(this.href,'Rediger sag <%: item.JobNumID %> ', 'status=0, toolbar=0, location=0, menubar=0, directories=0, resizeable=0, scrollbars=0, width=900, height=700'); return false;">Rediger</a>                 
        </td>

在Firefox中，这个功能运行得很完美。但是，在IE中，当我点击一行时，JQuery会崩溃。

如果我在IE中调试页面，我会得到以下信息。

Out of stack space

在jquery-1.4.1.js的第1822行

 // Trigger the event, it is assumed that "handle" is a function
    var handle = jQuery.data( elem, "handle" );
    if ( handle ) {
        handle.apply( elem, data );
    }

我对Javascript并不是很精通，所以我陷入了困境。

编辑：在单击事件中，IE在我的window.open函数中遇到了空格问题。修复后，我现在可以看到单击事件实际上正在工作，但它进入了一个循环。它只会一直点击链接，直到出现栈空间不足的错误。

对此有什么想法吗？

- olve

Answer 1

试试这个：

$('table tr').live('click',function (event) {
    $('#asplink', this).trigger('click');
    return false;
})

根据这个问题，看起来使用event.stopPropogation();在live中不起作用，你需要使用return false;。我不确定为什么这在IE中会有问题而在Firefox中没有。

- rosscj2533

---

还是不起作用。我已经尝试使用类和ID引用。它仍然进入一个循环。链接被打开多次，直到主页抛出“堆栈溢出”。 - olve

Answer 2

找到了解决方案。

这个可行。

$('table tr').live('click', function (event) {                    
                window.open(jQuery(this).find(".asplink").attr('href'), 'Edit', 'status=0, toolbar=0, location=0, menubar=0, width=900, height=700');                               
            })

- olve

Answer 3

尝试：

$('table tr').live('click',function (event) {
  $(this).find('#asplink').trigger('click');

})

算了，看了你的代码后，我认为问题在于所有行都有相同的id。尝试将它们全部设为class而不是id，比如aslpink。然后将jquery改成：

$('table tr').live('click',function (event) {
  $(this).find('.asplink').trigger('click');

})

嗯嗯，好的： 尝试给所有行一个唯一的ID。例如：id='#asplink<%=JobId%>'并使用

$(this).find('.asplink').click();

页面上还有其他表格吗？

- Patricia

---

同样的错误。在JQuery中失败的地方不同。第1593行。if ( !handle ) { eventHandle = function() { // 处理触发器的第二个事件和页面卸载后调用的事件 return typeof jQuery !== "undefined" && !jQuery.event.triggered ? jQuery.event.handle.apply( eventHandle.elem, arguments ) : undefined; }; handle = jQuery.data( elem, "handle", eventHandle ); } - olve

纯属好奇：如果你只是调用 .click() 而不是 .trigger('click')，会发生什么？ 另外，我刚刚注意到：#asplink 是一种选择器，可以选择页面中所有 ID 为 asplink 的元素。你的页面上是否有多个具有相同 ID 的元素？这可能是导致 IE 出现问题的原因。 - Patricia

刚刚尝试了使用.click代替trigger。在Firefox中仍然有效，但在IE中会出现“对象不支持此属性或方法”的错误，但click事件仍然会执行。我的表格中每一行都有一个相同id的链接。如果我将其更改为类，则会出现内存不足错误。 - olve

我的表格中每一行都将有一个相同的id链接。这是违反HTML规范的，规范规定页面上的每个id必须是唯一的。我建议将其改为类。 - Powerlord

Answer 4

如果您的锚点标签仍然具有asplink类，请尝试在文档就绪时添加以下代码：

$('a.asplink').live('click', function(event) {
    event.stopPropogation();
}

这应该可以防止锚标签上的单击事件冒泡到 td 标签并再次触发锚标签上的单击事件。

- patrickmcgraw

---

这段代码的效果与调用click相同，而不是trigger('click')。我收到了一个“消息：对象不支持此属性或方法”的错误提示。行号：37 字符：21这是event.stop...的那一行。 - olve