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() {&nbsp; //&nbsp; &nbsp;var to_user_id = $(this).attr('id');&nbsp; // var chat_message = '#chat_message_'+to_user_id;&nbsp; $('#uploadImagesc').ajaxSubmit({&nbsp; &nbsp; target: chat_message,&nbsp; &nbsp; resetForm: true&nbsp; });});替换document最接近的静态祖先#uploadFilesc和#uploadImagesc。

Answer 2

我用代码修复了它，将图像返回到下面的聊天窗口$('#user_model_details').on('change', '#uploadImagesc', function() {&nbsp; $('#uploadImagesc').ajaxSubmit({&nbsp; &nbsp;&nbsp; &nbsp; target: '#'+ $('#mess_id').attr("value"),&nbsp; &nbsp;resetForm: true&nbsp; });&nbsp;});&nbsp;

Answer 3

这是因为您将事件绑定到加载后动态添加到页面的元素。在您的场景中，您需要将您的侦听器绑定到页面加载时存在的内容，一个很好的使用元素window如下：$(window).on('change',&nbsp;'#uploadImagesc',&nbsp;function()&nbsp;{});然后你的听众应该工作