Question

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

例如，值＆＃39; this.id＆＃39;是不同的;

图片（隐藏值=＆＃39; 3＆＃39;）

图片（隐藏值=＆＃39; 6＆＃39;）

图片（隐藏值=＆＃39; 8＆＃39;）

然而，无论我点击的图像，总是选择值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。

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

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

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

1 个答案: