Yalnızca ilk sonuç için çalışan dinamik olarak oluşturulmuş öğeler üzerinde Event Dinleyicisi

Question

Dinamik olarak oluşturulmuş HTML'm üzerinde çalışan olay dinleyicim var, ancak sahip olduğum sorun, yalnızca ilk sonucu dinlemenin mümkün olmasıdır.

Örneğin, 'this.id' değeri farklıdır;

GÖRÜNTÜ (gizli değeri = '3')

GÖRÜNTÜ (gizli değeri = '6')

GÖRÜNTÜ (gizli değeri = '8')

Ancak ne olursa olsun Tıkladığım resim, 3 değeri her zaman seçilir. Bu sorunu nasıl çözebilirim?

HTML

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

JavaScript (dinamik HTML oluşturmak)

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

Sorun, birden çok kez eklenen öğe için statik kimlik kullanımınızdır. Bir öğenin kimliği, bir belgedeki benzersiz olmalı, kimlik seçici, yalnızca belirtilen kimlikle ilk öğeyi getirecektir. Durumunuzda, #myForm derken, sayfada her zaman ilk myForm'u döndürecektir.

Bunun yerine sınıf seçici kullanabilirsiniz ve element için benzersiz olan tıklandığında send eleman

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