How can we bind event inside event jquery?

Question

<script>
    $(document).ready(function(){
        $(".submit_modal1").click(function(e){
            e.preventDefault();
            id = this.id;
            name = $("#fname_"+id).val();
            email = $("#email_"+id).val();
            phone = $("#phone_"+id).val();
            upload_resume = $("#upload_resume_"+id).val();
            $.ajax({
                type:"POST",
                data:{"id":id,"name":name,"email":email,"phone":phone,"upload_resume":upload_resume},
                url:"<?php echo base_url(); ?>send",
                success:function(data){
                    $("#send_hr").html(data);
                }
            });

            $("#upload_resume_"+id).change(function(){
                var file_data = $("#upload_resume_"+id).prop('files')[0];   
                var form_data = new FormData();                  
                form_data.append('file', file_data);
                $('#imgsss').html("<img src='<?php echo base_url(); ?>resource/loading.gif' />");
                $.ajax({
                    url: '<?php echo base_url(); ?>upload_resume',
                    dataType: 'text',
                    cache: false,
                    contentType: false,
                    processData: false,
                    data: form_data,                         
                    type: 'post',
                    success: function(php_script_response){
                        $("#imgsss").html(php_script_response);
                    }
                });
            });
        });
    });
</script>

In this code, I trigger two events i.e. click and change where I want to run $("#upload_resume_"+id).change(function(){}); inside $(".submit_modal1").click(function(e){}). Is it possible to do it or is there any other way to trigger both event simulteniously. How can I do this ?Please help me.

Thank You

Correct me if I am wrong, you want to trigger them both while clicking the `.submit_modal1` thing — , Dec 20 '18 at 07:29
That is not good practise.. apart from that, every time you click `submit_modal1` you'll end up registering another eventListener for `upload_resume`. Consider using one event to trigger two seperate functions (if you need) or use `trigger` to execute a custom event instead. — faerin, Dec 20 '18 at 07:29
So, How can I upload a file using onclick event @entiendoNull — sam orten, Dec 20 '18 at 07:31
You can trigger any event .`$("#upload_resume_"+id).trigger('change')` try this inside click function. — Sumesh TG, Dec 20 '18 at 07:35
check this post https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload — yip102011, Dec 20 '18 at 07:35
Just bind the actual file input to a `change` listener. In there you'll keep your logic to upload the file. There are a neverending stream of examples on how to do this. Here's one: https://stackoverflow.com/a/24939229/3293843 — faerin, Dec 20 '18 at 07:35

score 0 · Answer 1 · answered Dec 20 '18 at 07:29

$("#upload_resume_"+id).change(function(){ does not trigger the event

If you cannot just chain the PHP from the other PHP, then you likely mean

$(function() {
  $(".submit_modal1").click(function(e) {
    e.preventDefault();
    id = this.id;
    name = $("#fname_" + id).val();
    email = $("#email_" + id).val();
    phone = $("#phone_" + id).val();
    upload_resume = $("#upload_resume_" + id).val();
    $.ajax({
      type: "POST",
      data: {
        "id": id,
        "name": name,
        "email": email,
        "phone": phone,
        "upload_resume": upload_resume
      },
      url: "<?php echo base_url(); ?>send",
      success: function(data) {
        $("#send_hr").html(data);
        $("#upload_resume_" + id).change() // HERE 
      }
    });
    $("#upload_resume_" + id).change(); // OR HERE

  });

  // any change to upload_resume*
  $("[id^=upload_resume]").change(function() {
    var file_data = $(this).prop('files')[0];
    var form_data = new FormData();
    form_data.append('file', file_data);
    $('#imgsss').html("<img src='<?php echo base_url(); ?>resource/loading.gif' />");
    $.ajax({
      url: '<?php echo base_url(); ?>upload_resume',
      dataType: 'text',
      cache: false,
      contentType: false,
      processData: false,
      data: form_data,
      type: 'post',
      success: function(php_script_response) {
        $("#imgsss").html(php_script_response);
      }
    });
  });

});

I think it won't work. For manually fire an event you should use `trigger`. — Sumesh TG, Dec 20 '18 at 07:37
@SumeshTG No. `.change()` is short for `.trigger("change")` : https://api.jquery.com/change/#change — mplungjan, Dec 20 '18 at 07:38

How can we bind event inside event jquery?

1 Answers1