Parent event doesn't work

0
votes

I have a label element for an input file which has the default click event to open a file selection dialog. this is for image uploading.after upload, the uploaded image is shown inside the label and if the user wants to change the photo he/she clicks the photo(or the buttons-child elements) and the dialog reopens. my problem is that after image uploading, if the user clicks on image the dialog won't open in IE 8(default parent label event).here is my code:

<label class="fileinput fileinput-new" data-provides="fileinput" style="cursor: pointer;width: 200px;">
    <input type="file" name="photo_2" style="position: absolute;left:-9999px">
    <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 130px;background:url(http://localhost/project/assets/images/upload_a_photo.png) no-repeat center center;cursor: pointer">
    <img width="190px" height="116px" src="http://localhost/project/uploads/394230a6519aae0d21170d6a409e5010.jpg">
    </div>
    <button type="button" class="btn btn-default btn-block">Default</button>
    <button type="button" class="btn btn-danger btn-block">Primary</button>
</label>

JSBIN:

http://jsbin.com/uXequYa/1

It must not contain any JS code for calling parent event because IE prevents changing input value though that way.

1
htmlevents

1 Answers

0
votes

You need 

<label for="ID_OF_YOUR_INPUT_EL" ...

and

<input  type="file" id="ID_OF_YOUR_INPUT_EL" ...