PrimuS PrimuS - 5 months ago 8
jQuery Question

.on('change', '.class') selects the wrong item (first one only)

I have several file upload/camera inputs on my site, they all do the same but send different attributes with them:

<!--- INPUT 1 --- (MODULE 111111) -->
<input type="file" capture="camera" class="uploadImage"
data-schedule="1"
data-schedule-object="27"
data-schedule-object-module="111111"
id="cameraInput_1"
name="cameraInput_1">

<!--- INPUT 2 --- (MODULE 222222) -->
<input type="file" capture="camera" class="uploadImage"
data-schedule="1"
data-schedule-object="27"
data-schedule-object-module="222222"
id="cameraInput_2"
name="cameraInput_2">


Now upon click it uploads an image and makes several entries to the DB

JS Code

$(document).on('change', '.uploadImage', function () {
var $inpt = $(this);
var $som = $inpt.attr('data-schedule-object-module');
....
console.log($som);
....
});


Now, when I click Input 1, everything is fine, but when I choose Input 2 (or any other following),
console.log($som)
always gives me
11111
the attribute from the FIRST. Where am I wrong in my JS?

Side Note

Another approach would be to have ONE fileupload and trigger that upon click on a selector that has all the needed attributes, but that would mean some recoding, I think the way I have it currently must be possible somehow?

Answer
$("input[type=file]").change(function () {
    var $inpt = $(this);
    var $som = $inpt.attr('data-schedule-object-module');
    console.log($som);
});

See Fiddle