HTML

<div class="event-image">
  <figure>
    <img src="<?php echo base_url('assets/images/addimg.png'); ?>" />
    <figcaption class="imagcaption">Add Image</figcaption>
  </figure>
  <input type="file" name="upload" />
</div>

jQuery

$(document).on("click","div.event-image",function(){
    $(this).children("input[type=file]").trigger("click");    
});

I create above div in loop, so there will me many divs with class="event-image". How to trigger the file of the div on which the user click.

Any help would be great

HTML

<div class="event-image">
  <figure>
    <img src="<?php echo base_url('assets/images/addimg.png'); ?>" />
    <figcaption class="imagcaption">Add Image</figcaption>
  </figure>
  <input type="file" name="upload" />
</div>

jQuery

$(document).on("click","div.event-image",function(){
    $(this).children("input[type=file]").trigger("click");    
});

I create above div in loop, so there will me many divs with class="event-image". How to trigger the file of the div on which the user click.

Any help would be great

• javascript
• jquery
• html

• 2 Because when you triggering input click on document click. Document click automatically calling again and it repeating this process. So you getting this error. – Manwal Commented Dec 1, 2015 at 7:14
• You can use e.stopPropagation() inside click of file – Rajesh Commented Dec 1, 2015 at 7:16
• i am calling document bcz its ajax uploaded div and without it i am not able to click on it – Waqar Haider Commented Dec 1, 2015 at 7:16

1 Answer 1

Use e.stopPropagation()

Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

Add this:

$("input[type=file]").on("click", function(e){
   e.stopPropagation();
})