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

Question

我让我的事件监听器在我动态创建的 HTML 上工作，但我遇到的问题是它总是只监听第一个结果。

例如，'this.id'的值不同；

图像（隐藏值 = '3'）

图像（隐藏值 = '6'）

图像（隐藏值 = '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;
            });         

});

Answer 1

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

相反，您可以使用类选择器，您可以使用closest() like 查找被点击的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;
});