在IE 8中,Jquery的attr('src')未定义(在Firefox中有效)

7

这个问题已经很严重了,我来总结一下我们发现的情况:

  • 在事件处理程序内部,无论是使用jQuery还是普通的javascript,在IE8中都不能读取属性src(FF正常工作)

  • 唯一的方法是在处理程序外部获取数据,将其写入数组并在处理程序内部之后读取它

  • 但是仍然没有可能写入src(无论是jQuery还是javascript - 只适用于IE 8)

  • 我通过将img元素自己写入文档中使其工作,但是这个问题背后的原因没有解决

我们有两次使用代码片段。

旧代码

<script type="text/javascript">
jQuery(document).ready(function() {
//...
//view entry
jQuery('.blogentry').live('click',function(){
    // Get contents
    blogtext = jQuery(this).children('.blogtext').html();
    blogauthor = jQuery(this).children('.onlyblogauthor').html();
    blogtitle = jQuery(this).children('.blogtitle').html();
    profileimage = jQuery(this).children('.profileimage').html();
    imgleft = jQuery(this).children('.Image_left').attr('src');
    imgcenter = jQuery(this).children('.Image_center').attr('src');
    imgright = jQuery(this).children('.Image_right').attr('src');

    // Write contents
    jQuery('#bild_left').attr('src', imgleft);
    jQuery('#bild_center').attr('src', imgcenter);
    jQuery('#bild_right').attr('src', imgright);
    jQuery('.person').attr('src', profileimage);
    jQuery('#g_fb_name').html(blogauthor);
    jQuery('#g_titel').html(blogtitle);
    jQuery('#g_text').html(blogtext);
    //...
});
//...
// Change entry
jQuery('.blogentry').each(function(){
    entryindex = jQuery(this).attr('rel');
    if (entry == entryindex)
    {
        // The following works fine (so 'children' works fine):
        blogtext = jQuery(this).children('.blogtext').html();
        blogauthor = jQuery(this).children('.onlyblogauthor').html();
        blogtitle = jQuery(this).children('.blogtitle').html();
        profileimage = jQuery(this).children('.profileimage').html();

        // This does not work - only in IE 8, works in Firefox
        imgleft = jQuery(this).children('.Image_left').attr('src');
        imgcenter = jQuery(this).children('.Image_center').attr('src');
        imgright = jQuery(this).children('.Image_right').attr('src');

        //alert: 'undefined'
        alert(jQuery(this).children('.Image_center').attr('src'));

        //...
    }
}
//...
});
</script>

新代码

请查看我发布的答案以获取新代码。

更新:

如果在单击事件内调用,则不起作用

jQuery('.Image_left').each(function(){
alert(jQuery(this).attr('src'));
});

获取图像数据的解决方案:

relcounter = 1;
imgleft_array = new Array();
jQuery('.Image_left').each(function(){
imgleft_array[relcounter] = jQuery(this).attr('src');
relcounter++;
});
relcounter = 1;
imgcenter_array = new Array();
jQuery('.Image_center').each(function(){
imgcenter_array[relcounter] = jQuery(this).attr('src');
relcounter++;
});
relcounter = 1;
imgright_array = new Array();
jQuery('.Image_right').each(function(){
imgright_array[relcounter] = jQuery(this).attr('src');
relcounter++;
});

//... inside the eventhandler (entryindex = 'rel' of blogentry):
imgleft = imgleft_array[entryindex];
imgcenter = imgcenter_array[entryindex];
imgright = imgright_array[entryindex];

这可以工作是因为它不是在事件处理程序内调用,且源在事先保存了。
但是!我的目标是仍然无法写入数据:
jQuery('#bild_left').attr('src', imgleft);
jQuery('#bild_center').attr('src', imgcenter);
jQuery('#bild_right').attr('src', imgright);

更新!!!

这真是太疯狂了,我试着用通常的javascript来写入数据。在火狐中可以工作,但在IE8中无法工作。这里真的存在一些与属性src相关的严重问题:

document.getElementById('bild_left').src = imgleft;
document.getElementById('bild_center').src = imgcenter;
document.getElementById('bild_right').src = imgright;

alert(document.getElementById('bild_left').src);

这在Firefox中可以正常运行,但在IE8中却不行,写入后src属性仍然未定义!这似乎与jQuery无关!


你能同时提供相关的HTML吗? - James Montagne
尝试使用“console.log(...)”而不是“alert(...)”,以及ie / ff(firebug)/ chrome的“开发人员工具”。您将能够详细检查元素。“[Object object]”可能意味着jquery函数返回了一个元素......或错误对象。因此,控制台在这里非常方便。 - roselan
我已经提供了HTML代码。目前为止,我已经证明返回了一个有效的对象。console.log()会抛出一个错误,这只适用于某个插件吗? - SamiSalami
我认为你应该展示整个点击函数,因为你的代码片段本身是可以的。 - Arsen K.
我添加了代码并显示了两个处理程序。它被使用了两次,但在两种情况下都表现相同...现在通过使用html()编写img元素来使其正常工作。非常感谢您。我想这将保持谜团;-) - SamiSalami
7个回答

2
嘭嗒嘭嘭,
imgright = jQuery(".Image_right",this).attr('src');

哇,看起来很有前途,但仍然未定义 :-( 谢谢,我不知道这个符号。 - SamiSalami
这个也不行:jQuery('.Image_left').each(function(){ alert(jQuery(this).attr('src')); }); - SamiSalami

2

children 只会查找直接子元素,而 find 会一直查找到它在 dom 树中的最后一个子元素内的所有元素。如果你说 find 能起作用,那么你要找的元素不是它的直接子元素。

尝试运行 jQuery(this).children('#Image_center').length 看看结果。

顺便提一下,即使 jQuery 没有找到任何元素,它也会返回一个空对象而不是 null。因此,弹出一个空对象将始终给你 [object Object]。你应该始终检查 jQuery 对象的 length 属性。

试试这个:

alert(jQuery(this).find('#Image_center').length);//检查元素是否被找到。


他并没有说find起作用而children没有。我认为find的例子只是想表明元素确实存在,而你回答的第二部分指出了其中的缺陷。他能够获取classid,因此他似乎正在获取该元素。 - James Montagne
我试图在回答的前半部分向他解释findchildren之间的区别,而在后半部分则说明如何检查元素是否存在。 - ShankarSangoli
没错,我同意你说的一切,只是这并没有解决他的问题。他可以获取元素(因为他可以获取classid),但无法获取其src - James Montagne
谢谢您的解释,我之前不知道JavaScript总是返回一个对象,但正如kingjiv所说,我可以通过读取类和ID来找到该对象。无论如何,我尝试了“alert(jQuery(this).find('#Image_center').length);”,它返回1。所以对象被找到了。似乎问题出在“src”上。另外,我无法获取属性“alt”。 - SamiSalami
你能告诉我们在哪个事件处理程序中执行这段代码吗?我需要知道这段代码中的 this 指向什么。这样很容易判断是使用 children 还是 find - ShankarSangoli
显示剩余4条评论

1

问题不在于 attr('src'),而是其他方面。以下代码片段在IE8中有效:

    <img id="xxx" src="yrdd">

    <script type="text/javascript">

        alert($('#xxx').attr('src'));

    </script>

但是,如果您例如将 text/javascript 更改为 application/javascript - 此代码将在 FF 中工作,但在 IE8 中不起作用。


还是不是我的问题 :-/ 我已经有了"type"为"text/javascript",但还是谢谢!(我会在我的帖子中添加这个) - SamiSalami
我将图像的ID更改为类(此时ID是错误的),但这并不是解决我的问题的方法。但是!我发现以下代码返回src:alert(jQuery('.blogentry .Image_left').attr('src'));我的问题似乎不是使用jQuery(this)而是需要与定义的元素建立连接。 - SamiSalami

1
尝试制造延迟:
jQuery(document).ready(function() {

  setTimeout(function () {

    jQuery('.blogentry').each(function(){
      // your code...
    });

  }, 100); // if doesn't work, try to set a higher value

});

更新

希望这段代码能够正常工作。

$('.blogentry img').each(function(){
  alert( $(this).attr('src') );
});

更新

我不确定,但可能IE无法读取首字母大写的类名... 尝试将".Image_center"更改为".image_center"

更新

再次检查你的代码。你肯定有一些错误。在IE8中尝试这个 jsfiddle ,attr('src')会正确显示。http://jsfiddle.net/qzFU8/


我将值设置为5000,但仍然没有成功。 但是! 我发现以下的代码返回了src(我已经将ids更改为classes,请查看我的更新问题):alert(jQuery('.blogentry .Image_left').attr('src'));我的问题是,它似乎与jQuery(this)不起作用,但我需要与定义的元素建立连接。 - SamiSalami
是的,谢谢。但这只在事件处理程序之外调用时起作用。查看我的问题末尾,我现在通过将数据保存到数组中来获取数据,但我仍然无法写入...有任何想法,不再重要是否漂亮和干净了 :-/ - SamiSalami
没有效果,大写字母没有关系...但我已经假设了,因为我通过它们的类名循环遍历了图像(请查看我在顶部发布的帖子)。 - SamiSalami
请再次检查我的帖子。我使用普通的JavaScript编写了数据,在Firefox中可以工作,但在IE8中无法工作!这不是jQuery的问题,使用JavaScript也无法工作! - SamiSalami

1

这个问题已经深入研究,我们总结了以下发现:

  • 在事件处理程序中,无论是使用jQuery还是普通的javascript,在IE8中都无法读取属性src(FF可以正常工作)

  • 唯一的方法是在处理程序外部获取数据,将其写入数组,然后从处理程序内部读取

  • 但仍然没有办法写入src(无论是jQuery还是javascript都不起作用-只适用于IE 8)

  • 我通过将img元素本身写入文档来解决了这个问题,但是这个问题背后的原因还没有解决

新代码

relcounter = 1;
imgleft_array = new Array();
jQuery('.Image_left').each(function(){
    imgleft_array[relcounter] = jQuery(this).attr('src');
    relcounter++;
});
relcounter = 1;
imgcenter_array = new Array();
jQuery('.Image_center').each(function(){
    imgcenter_array[relcounter] = jQuery(this).attr('src');
    relcounter++;
});
relcounter = 1;
imgright_array = new Array();
jQuery('.Image_right').each(function(){
    imgright_array[relcounter] = jQuery(this).attr('src');
    relcounter++;
});

//view entry
jQuery('.blogentry').live('click',function(){
    // Get contents
    entryindex = jQuery(this).attr('rel');
    blogtext = jQuery(this).children('.blogtext').html();
    blogauthor = jQuery(this).children('.onlyblogauthor').html();
    blogtitle = jQuery(this).children('.blogtitle').html();
    profileimage = jQuery(this).children('.profileimage').html();
    imgleft = imgleft_array[entryindex];
    imgcenter = imgcenter_array[entryindex];
    imgright = imgright_array[entryindex];

    // Write contents
    jQuery('#entryimages').html('');
    jQuery('#entryimages').html('<img class="rotate" width="132" height="138" id="bild_left" src="'+imgleft+'" /><img class="rotateright" width="154" height="162" id="bild_center" src="'+imgcenter+'" /><img class="rotate" width="132" height="138" id="bild_right" src="'+imgright+'" />');

    jQuery('.person').attr('src', profileimage);
    jQuery('#g_fb_name').html(blogauthor);
    jQuery('#g_titel').html(blogtitle);
    jQuery('#g_text').html(blogtext);

});

所以在事件处理程序中我只是不使用 .attr('src')。


1
$(document).ready(function () {
    $("#imgReload").click(function () {
        $('#<%=imgCaptcha.ClientID %>').removeAttr("src");
        $('#<%=imgCaptcha.ClientID %>').attr("src", "Captcha.ashx");
    });
});

有趣的想法,我之前没有尝试过删除属性,但是我已经不再在相关项目上工作了,所以无法测试这是否是解决问题的方法。注意:在其他项目中,我更改了src属性而没有出现问题,即使在IE8中也是如此 - 所以这是一种相当特殊的情况,原因仍然未知。但也许你的答案会有所帮助。 - SamiSalami

1

为什么不直接使用一个可用的呢?

alert(jQuery(this).children('#Image_center').attr('src'));

将子元素更改为查找

alert(jQuery(this).find('#Image_center').attr('src'));

这可能是最简单的解决方案,而且它能够正常工作,为什么不使用它呢?


抱歉,但是你误解了!对象无论是通过children和find方法返回都一样。但是attr('src')在这两种情况下都为空 - 我已经尝试过了,而且只是在IE 8中出现这个问题! - SamiSalami

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接