jQuery从附加HTML的元素中获取值

Question

I am appending a table with a drag and drop library for uploading files. However when a file is dropped, I need to create a name and description for this file. However, I cant seem to get the element from the text box when someone writes in the name.

This is the code and my attempt.

$.each(data.files, function (index, file) {
         $('#TestTable > tbody:last-child').append('<tr><td>' + file.name + '</td><td><input id="file-upload-title' + file.name + '" type="text"></td></tr>');

            data.context = $('<button/>').text('Upload')
            .addClass("btn btn-primary start")
            .appendTo('#TestTable > tbody:last-child')
            .click(function () {
                    // This is the problem
                   alert($('#file-upload-title' + file.name).val()); = undefined
            });

        });

You can see when I append the table I use a unique ID for the file-upload-title input text object (in case there are many files)

How can I get the value from writing the HTML after the document has loaded?

Edit

There is a object present for $('#file-upload-title' + file.name) but not val()

Thanks

Answer 1

Instead of hacking together a selector you can use the this keyword to reference the element which raised the event. From there you can use DOM traversal methods to find the related input . You haven't shown your HTML so I can't give you a specific example, but it would be something like this:

// your code...
.click(function () {
    var $input = $(this).closest('tr').find('input');
    console.log($input.val());
});