JQuery 关于以一种形式而不是另一种形式工作的更改

Question

我有一个 php 聊天页面，其中包含群聊和一对一聊天。我在更改事件上使用 jquery 从 php 文件上传函数获取数据，并将图像 HTML 文本输入到 contenteditable div 中，以便也可以和文本。这在群聊窗口中工作正常，但在单个聊天窗口中无效。两个聊天窗口代码都在同一个 html 中，js 样式块隐藏了显示。一切正常，除了 on change 是行不通的，不管我做什么。我知道在我的代码片段中我仍然需要处理目标，因为这是动态的，但是一旦 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      });     });   所以在这一点上，它只是让第二个函数调用从 Php 获取数据的 on change 函数，我会很高兴此刻 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() {});

然后你的听众应该工作