CODEWITHSUNDEEP
javascriptjqueryhtml
user3428422
user3428422

Reputation: 4570

jQuery getting value from element with appended HTML

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

Upvotes: 1

Views: 92

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337666

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

Upvotes: 3

Related Questions