Jquery attr('src') undefined in IE 8 (work

2019-02-22 01:06发布

站内文章 / JavaScript
10 0 0

问题:

This has gotten so far,that I will sum up what we found out:

  • Inside the event handler the attribute src cannot be read in IE8 (FF works fine), neither with jQuery nor with usual javascript

  • The only way to get the data was to get it outside the handler, write it to an array and read it afterwards from the inside of the handler

  • But there was still no possibility to write to src (neither jQuery nor javascript worked - only for IE 8)

  • I've got it working by writing the img elemts themselves to the document, but the reason behind this problem is no solved

The snippet we have is used twice.

The old code

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

The new code

Please see my own posted answer for the new code.

UPDATE:

This does not work if called inside of the click event!!!

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

SOLUTION TO GET THE IMAGE DATA:

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

This works because it is not called inside the event handler and the sources are saved beforehand

BUT! I still cannot write the data, which is my aim:

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

UPDATE!!!

This is just crazy, I tried to write the data via usual javascript. This also works in FF, but no in IE8. Here really is some serious problem witt the attribute 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);

This works in FF, but not in IE8, the attribute src remains undefined after writing! This seems to be not a jQuery problem at all!

回答1:

children looks for immediate child elements only where as find looks for all the elements within it until its last child element down the dom tree. If you are saying find is working that means the element you are looking is not its immediate children.

Try to alert this jQuery(this).children('#Image_center').length see what you get.

FYI. Even when any element is not found jQuery will return an emtpy object it will never be null. So alert an emtpy object will always give you [object Object]. You should alwasy check for the length property of the jQuery object.

Try this

alert(jQuery(this).find('#Image_center').length);//To check whether element is found or not.



回答2:

Bing Bang Boom,

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


回答3:

And why don't you easily use one working?

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

change children to find

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

It is probably the easiest solution, and when it work, why wouldn't you use it?



回答4:

the problem is not in the attr('src') but in something else. The following snippet works in IE8:

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

    <script type="text/javascript">

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

    </script>

But if you for example change the the text/javascript to application/javascript - this code will work in FF but will not work in IE8



回答5:

This has gotten so far,that I will sum up what we found out:

  • Inside the event handler the attribute src cannot be read in IE8 (FF works fine), neither with jQuery nor with usual javascript

  • The only way to get the data was to get it outside the handler, write it to an array and read it afterwards from the inside of the handler

  • But there was still no possibility to write to src (neither jQuery nor javascript worked - only for IE 8)

  • I've got it working by writing the img elemts themselves to the document, but the reason behind this problem is no solved

The new code

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

});

So I am just not using .attr('src') in the event handler....



回答6:

Try to make a delay:

jQuery(document).ready(function() {

  setTimeout(function () {

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

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

});

UPDATE

Hope, this code will work.

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

UPDATE

I'm not sure, but maybe IE can't read classes with uppercase first letter... Try to change ".Image_center" to ".image_center"

UPDATE

Check your code again. You definitely have some error. Try this jsfiddle in IE8, attr('src') is showed correctly. http://jsfiddle.net/qzFU8/



回答7:

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


标签： javascript jquery internet-explorer-8
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~