JQuery on change working in one form but not another

user_11653246 0
Viewed 140

I have a php chat page the has a group chat and a one to one chat. I'm using a jquery on change event to get the get the data from the php file upload function and input the image HTML text into a contenteditable div so that can also and text.

This work fine in the group chat window but not in the single chat window. Both chat window codes are in the same html with js style blocks hiding the display. everything work except the on change is just not work not matter what I do.

I know in my snippet of code I still need to deal with the target as this is dynamic, but that should be simple enough once the on change event actually fires.

This is the form bit, it is being built within a js/php function this is the single one not working '''''''''''''''''''''''''

  modal_content += '<form id="uploadImagesc" method="post" action="php_includes/chat-img-upload-sc.php">';
  modal_content += '<label for="uploadFilesc"><i class="fas fa-cloud-upload-alt"></i></label>';
  modal_content += '<input type="file" name="uploadFilesc" id="uploadFilesc" accept=".jpg, .png" /></form>';

''''''''''''''''''''''''''''''''''''''

This is the example from the group chat that is working '''''''''''''''''''''''''''''''''''''''

<form id="uploadImage" method="post" action="php_includes/chat-img-upload.php">
     <label for="uploadFile"><i class="fas fa-cloud-upload-alt"></i></label>
     <input type="file" name="uploadFile" id="uploadFile" accept=".jpg, .png" />
    </form>

''''''''''''''''''''''''''''''''''''''' and these are the on. change bits of JQuery

'''''''''''''''''''''''''''''''''''''''''''''' Working Code

$('#uploadFile').on('change', function(){
  '$'('#uploadImage').ajaxSubmit({
   target: "#group_chat_message",
   resetForm: true
  });
 });

'''''''''''''''''''''''

Not Working Code

  $('#uploadFilesc').on('change', function(){
     //   var to_user_id = $(this).attr('id');
     // var chat_message = '#chat_message_'+to_user_id;
      $('#uploadImagesc').ajaxSubmit({
       target: chat_message,
       resetForm: true
      });
     });

So at this point it is just the getting the on change to function the second function call to get the data from Php, I'd be happy with an alert of the onchange at the moment.

jquery javascript
3 Answers

It's not working because it sounds like you are adding HTML dynamically then trying to attach an event handler to it. In this scenario, you need to use event delegation which simply attaches the event handler to an ancestor.

This should be all you need to change:

$(document).on('change', '#uploadFilesc', function() {
  //   var to_user_id = $(this).attr('id');
  // var chat_message = '#chat_message_'+to_user_id;
  $('#uploadImagesc').ajaxSubmit({
    target: chat_message,
    resetForm: true
  });
});

Substitute document for the closest static ancestor to #uploadFilesc and #uploadImagesc.

user_38242830

I fixed it with the code to return the image to the chat window below 

$('#user_model_details').on('change', '#uploadImagesc', function() {
  $('#uploadImagesc').ajaxSubmit({   
    target: '#'+ $('#mess_id').attr("value"),
   resetForm: true
  });
 });
user_116532460

It's because you're binding the event to an element that is being dynamically added to the page after load. In your scenario you need to bind your listener to something that exists on page load, a good element to use is window like so:

$(window).on('change', '#uploadImagesc', function() {});

Your listener should then work

user_33237360
Related