在IE 8中未定义Jquery attr('src')(在FF中工作)

时间:2011-08-23 14:38:18

标签: javascript jquery internet-explorer-8

到目前为止,我将总结我们发现的内容:

  • 在事件处理程序中,无法在IE8中读取属性src(FF工作正常),jQuery和常用的javascript

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

  • 但是仍然没有可能写入src(jQuery和javascript都没有工作 - 仅适用于IE 8)

  • 我通过将img elemts自己写入文档来实现它,但这个问题背后的原因尚未解决

我们的代码片段使用了两次。

旧代码

<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];

这是有效的,因为它未在事件处理程序中调用,并且事先保存了源

BUT! 我仍然无法写入数据,这是我的目标:

jQuery('#bild_left').attr('src', imgleft);
jQuery('#bild_center').attr('src', imgcenter);
jQuery('#bild_right').attr('src', imgright);

UPDATE !!!

这很疯狂,我试图通过常用的javascript写入数据。这也适用于FF,但在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);

这适用于FF,但不适用于IE8,写入后属性src仍未定义!这似乎根本不是一个jQuery问题!

7 个答案:

答案 0 :(得分:2)

children仅查找直接子元素,其中find查找其中的所有元素,直到它在dom树中的最后一个子元素为止。如果您说find正在发挥作用,则意味着您正在寻找的元素不是其直接的孩子。

尝试提醒此jQuery(this).children('#Image_center').length看看你得到了什么。

FYI。即使没有找到任何元素,jQuery也会返回一个永远不会为null的emtpy对象。因此,警告emtpy对象将始终为您提供[object Object]。您应该检查jQuery对象的length属性。

试试这个

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

答案 1 :(得分:2)

Bing Bang Boom,

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

答案 2 :(得分:1)

为什么不轻易使用一个工作?

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

改变孩子找

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

这可能是最简单的解决方案,当它工作时,你为什么不使用它?

答案 3 :(得分:1)

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

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

    <script type="text/javascript">

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

    </script>

但是,如果您将 text / javascript 更改为应用程序/ javascript - 此代码将在FF中运行但在IE8中无效

答案 4 :(得分: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/

答案 5 :(得分:1)

到目前为止,我将总结我们发现的内容:

  • 在事件处理程序中,无法在IE8中读取属性src(FF工作正常),jQuery和常用的javascript

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

  • 但是仍然没有可能写入src(jQuery和javascript都没有工作 - 仅适用于IE 8)

  • 我通过将img elemts自己写入文档来实现它,但这个问题背后的原因尚未解决

新代码

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')....

答案 6 :(得分:1)

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