JQuery关于以一种形式而不是另一种形式工作的变化

Question

我有一个 php 聊天页面，其中包含群聊和一对一聊天。我正在使用 jquery on change 事件从 php 文件上传函数中获取数据，并将图像 HTML 文本输入到 contenteditable div 中，这样也可以和文本。

这在群聊窗口中可以正常工作，但在单个聊天窗口中却不行。两个聊天窗口代码都在同一个 html 中，带有隐藏显示的 js 样式块。一切正常，除了 on change 就是不管我做什么都是行不通的。

我知道在我的 sn-p 代码中我仍然需要处理目标，因为这是动态的，但是一旦 on change 事件实际触发，这应该足够简单。

这是表单位，它是在 js/php 函数中构建的，这是唯一一个不起作用 ''''''''''''''''''''''''

  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>';

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

这是来自正在工作的群聊的示例 '''''''''''''''''''''''''''''''''''''

<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>

'''''''''''''''''''''''''''''''''''' 这些是关于。更改 JQuery 的位

'''''''''''''''''''''''''''''''''''''''''' 工作代码

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

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

不工作的代码

  $('#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
      });
     });   

所以在这一点上，它只是获得 on change 以运行第二个函数调用以从 Php 获取数据，我会很高兴此刻的 onchange 警报。

Answer 1

它不起作用，因为听起来您正在动态添加 HTML，然后尝试将事件处理程序附加到它。在这种情况下，您需要使用事件委托，它只是将事件处理程序附加到祖先。

这应该是您需要更改的全部内容：

$(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
  });
});

用document 替换最接近#uploadFilesc 和#uploadImagesc 的静态祖先。

Answer 2

我用代码修复了它，将图像返回到下面的聊天窗口

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

Answer 3

这是因为您将事件绑定到加载后动态添加到页面的元素。在您的场景中，您需要将侦听器绑定到页面加载时存在的内容，一个好的元素是window，如下所示：

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

然后你的监听器应该可以工作了