Javascript 使用jQuery更新动态加载图像的SRC属性
我尝试动态加载一个图像标记,在下一行,尝试更改它的SRC属性。它不起作用。可能是因为它没有足够的“时间”让图像标记在SRC属性更改之前加载到插座DIV(#DIV_Extend_2)中?整个图像上传表单是动态加载的,如果图像标签包含在第一个动态包含中,它就会工作;我可以更改图像的SRC属性。但是如果使用load()将img标记放在change属性语句前面:Javascript 使用jQuery更新动态加载图像的SRC属性,javascript,jquery,image,dom,dynamically-generated,Javascript,Jquery,Image,Dom,Dynamically Generated,我尝试动态加载一个图像标记,在下一行,尝试更改它的SRC属性。它不起作用。可能是因为它没有足够的“时间”让图像标记在SRC属性更改之前加载到插座DIV(#DIV_Extend_2)中?整个图像上传表单是动态加载的,如果图像标签包含在第一个动态包含中,它就会工作;我可以更改图像的SRC属性。但是如果使用load()将img标记放在change属性语句前面:$(“#img_wlpst_PREV”).attr('src',“IMAGES/Apples_in_a_basket.JPG”)被执行,它不工作
$(“#img_wlpst_PREV”).attr('src',“IMAGES/Apples_in_a_basket.JPG”)代码>被执行,它不工作
请注意,在CSS中,我将display:none当图像作为POST_IMG_1.PHP文件的一部分包含时,用于图像的code>
谢谢你,谢谢你的帮助!!请在这个冠状病毒时期保持安全。。
主要HTML文档如下所示:
<div id='DIV_MAINPOST'>
<div id="DV_post_type">
<div id="div_POST_TXT">TEXT</div>
<div id="div_POST_IMG">Image!</div>
</div>
<div id="DIV_ERROR"> </div>
<div id="Div_Extend_1"> </div>
</div>
POST_IMG_1.PHP
<FORM method='post' action='PHP/FILE_UPLOAD_CHECK.PHP' id="FORM_img" enctype='multipart/form-data'>
<INPUT type='file' name='file_' size='10'></INPUT>
<button type='submit' value='upload'>Upload</button>
</FORM>
<div id="Div_Extend_2">
<img id="IMG_wlpst_PREV"></img> //case 1:: img tag included in the same file (which is also load()'ed, works fine. SRC gets updated.
//case 2:: this tag is not present, but the "Div_Extend_2" div is still present in POST_IMG_1.php.
</div>
你能这样试试吗?$('Div_Extend_1')。查找('IMG_wlpst_PREV').attr('src','IMAGES/Apples_in_a_basket.JPG')
看看这是否有效。嗨@Swati,刚刚尝试了你的建议。仍然不起作用;我已经添加了一个屏幕截图的元素出现在控制台和整个事情,如果你想调查更多。非常感谢!您好,检查答案应该可以在load
函数中使用回调。您可以像这样尝试$('Div_Extend_1')。查找('IMG_wlpst_PREV').attr('src','IMAGES/Apples_in_a_basket.JPG')
看看这是否有效。嗨@Swati,刚刚尝试了你的建议。仍然不起作用;我已经添加了一个屏幕截图的元素出现在控制台和整个事情,如果你想调查更多。非常感谢!您好,请在load
函数中使用回调函数检查答案是否有效。
<FORM method='post' action='PHP/FILE_UPLOAD_CHECK.PHP' id="FORM_img" enctype='multipart/form-data'>
<INPUT type='file' name='file_' size='10'></INPUT>
<button type='submit' value='upload'>Upload</button>
</FORM>
<div id="Div_Extend_2">
<img id="IMG_wlpst_PREV"></img> //case 1:: img tag included in the same file (which is also load()'ed, works fine. SRC gets updated.
//case 2:: this tag is not present, but the "Div_Extend_2" div is still present in POST_IMG_1.php.
</div>
<img id="IMG_wlpst_PREV"></img> //case 2::if loaded using $("#Div_Extend_2").load('POST_IMG_2.PHP'), doesn't work;
#DIV_MAINPOST
{ width: 310px;
background-color: grey;
display: flex;
flex-direction: column;
}
#DV_post_type
{ order: 1;
flex-direction: row;
display: flex;
}
#div_POST_TXT
{ order: 1;
width: 150px;
border: 2px solid black;
background-color: pink;
}
#div_POST_IMG
{ order: 2;
width: 150px;
border: 2px solid black;
background-color: pink;
}
#DIV_ERROR
{ order: 2;
border: 1px solid red;
width: 300px;
height: 30px;
color: red;
}
#Div_Extend_1
{ order: 3;
}
#IMG_wlpst_PREV
{ display: none; //case 1
width: 300px;
height: 300px;
}