當我們單擊動態創建的編輯圖標時，如何更改輸入字段中的值？

Question

這里的代碼中有一個ajax，它為字段分配值，但是有一個動態創建的編輯圖標，這意味着您將在數據庫中添加多少個地址，然后創建編輯圖標的次數。 我的需要是，當我單擊第一個按鈕時，它將警報其id值，而當我單擊另一個按鈕時，它將警報其id值以下是我嘗試的代碼：

var full_url = document.URL; // Get current url
var url_array = full_url.split('=') // Split the string into an array with / as separator
var UserId = url_array[url_array.length-1];  // Get the last part of the array (-1)
$.ajax({
    url:"url,
    type: "GET",
    dataType: 'json',
    async: false,
    data:{"UserId":UserId},
    success: function(response){
        if (response.response.total_record[0].status === "active") {
            $('#email').html(response.response.total_record[0].email);
            $('#name').html(response.response.total_record[0].first_name+" "+response.response.total_record[0].last_name);
            $('#first').val(response.response.total_record[0].first_name);
            $('#last').val(response.response.total_record[0].last_name);
            $('#phone').val(response.response.total_record[0].phone_number);
            $('#alternative').val(response.response.total_record[0].alternative_number);
            $('#id').val(response.response.total_record[0]._id);
            $('#status').val(response.response.total_record[0].status)
            if (response.response.total_record[0].status === "active") {
                $('#activate').hide();
            }
            if (response.response.total_record[0].status === "deactivate") {                    $('#activate').show();
                $("#deactivate").hide();
            }
            $.each(response.response.total_record[0].address,function(i,item){
                console.log(response.response.total_record[0].address[i])
                $('#edit_id').val(response.response.total_record[0].address[i]._id)
            $('.cards').append('<div class="location-list"><header class="header_title"><div class="location_heading"><h3>Location:</h3></div><div class="edit_icon"><a class="editByAnchor" id='+response.response.total_record[0].address[i]._id+' href="#" data-toggle="modal" data-target="#edit_address"><i class="fa fa-edit"></i></a></div></header><div id="dAddress" class="location-detial"><p><span id='+response.response.total_record[0].address[i]._id+'>'+response.response.total_record[0].address[i].address+'</span></p></div></div>');
            });                 
        }
    }
});  

HTML

<input type="hidden" id = "edit_id" value= "">

jQuery查找被點擊

$('.editByAnchor').change(function() {
            alert("You just clicked checkbox with the name " + this.id)
});

產生輸出

<a class="editByAnchor" id="1" href="#" data-toggle="modal" data-target="#edit_address"><i class="fa fa-edit"></i></a>
/*more like this but id will be change base on the dynamically fields*/

上面具有id屬性的輸出anchor tag將在您看到我的代碼時動態分配，因此如何單擊它們來獲取每個圖標的id屬性。

Answer 1

對於動態創建的元素，請使用on() 。 另外，您必須使用click事件而不是change ：

$('.editByAnchor').on('click', function() {
    alert("You just clicked checkbox with the name " + this.id)
});

Answer 2

通過引用此鏈接，我為此發布了一個答案，一切都很好，我必須按照以下步驟更改代碼

$(".editByAnchor").click(function(){
    var id = this.id;
    alert(id)
});