动态创建的元素上的事件侦听器仅对第一个结果起作用

Event Listener on dynamically created elements only working for first result

本文关键字：第一个 结果 起作用 事件 创建 元素 动态 侦听器      更新时间：2024-05-26

我让我的事件侦听器处理动态创建的HTML，但我遇到的问题是它总是只侦听第一个结果。

例如，值"this.id"不同；

IMAGE（隐藏值='3'）

IMAGE（隐藏值="6"）

IMAGE（隐藏值="8"）

但是，无论我单击的图像是什么，都始终选择值3。我该如何解决这个问题？

HTML

<div id="test"></div>

JavaScript（动态创建HTML）

var html =
'<form action="test.php" method="get" id="myForm">' +
  '<input type="hidden" name="mID" value"' + this.id + '"/>' +
  '<input type="image" id="send" src="this.image" name ="send"  alt="submit"/>' +
'</form>';
$('div#test').append(html);

AJAX

$("#test").on('click', '#send', function(e) {
e.preventDefault();
            $.get( $("#myForm").attr("action"),
                    $("#myForm :input").serializeArray(),
                    function(data) {            
                      console.log(data);
                        });
            $("#myForm").submit( function() {
               return false;
            });

})；

问题是对多次添加的元素使用静态ID。元素的ID在文档中必须是唯一的，ID选择器将只获取具有给定ID的第一个元素。因此，在您的情况下，当您说#myForm时，它将始终返回页面中的第一个myForm。

相反，您可以使用类选择器，并且可以使用类似于的closest()查找单击的send元素所属的窗体

var html =
  '<form action="test.php" method="get" class="myForm">' +
  '<input type="hidden" name="mID" value="' + this.id + '"/>' +
  '<input type="image" class="send" src="this.image" name ="send"  alt="submit"/>' +
  '</form>';
$('div#test').append(html);

$("#test").on('click', '.send', function(e) {
  e.preventDefault();
  var $form = $(this).closest('form');
  $.get($form.attr("action"), $form.find(":input").serializeArray(), function(data) {
    console.log(data);
  });
});
$("#test").on('submit', '.myForm', function(e) {
  return false;
});
相关文章：