When i click on the Addons Button and check / uncheck the items (Checkboxes ) , i am updating the data array
But even after setting the data ,when i inspect the element i see the data -stuff array is still empty
<div class="lastItm_Wrap" data-stuff="[]">
</div>
could you please let me know how to set data / update data stuff array
You need to set the attribute value instead of setting its data property.
change
$('.lastItm_Wrap').data('stuff', vendoritemsdata);
to
$('.lastItm_Wrap').attr('data-stuff', vendoritemsdata);
You are using the jQuery data-api, which has an internal storage to store the data values that is why the attribute value is not updated.
Your values are set properly in the internal storage so it should be fine.
// checkbox checked
$(document).on('click', '.ui-checkbox-off', function (event) {
var vendoritemsdata = $(".lastItm_Wrap").data('stuff');
var checkboxid = $(this).next().attr("id");
vendoritemsdata.push(checkboxid);
$('.lastItm_Wrap').data('stuff', vendoritemsdata);
console.log('off',vendoritemsdata)
});
// checkbox Unchecked
$(document).on('click', '.ui-checkbox-on', function (event) {
var vendoritemsdata = $(".lastItm_Wrap").data('stuff');
var itemtoRemove = $(this).next().attr("id");
vendoritemsdata.splice($.inArray(itemtoRemove, vendoritemsdata), 1);
console.log('on',vendoritemsdata)
$('.lastItm_Wrap').data('stuff', vendoritemsdata);
});
Demo: Fiddle
Look at the logged values in the console and you could see that it is working fine
