@click with Template7 rendering not working

Questions
1

Hi @nolimits4web,

I am trying to apply @click or @change on checkbox but on click or on change function defined under methods is not being triggered. Adding my code below as I have implemented, please have a look and suggest what am I doing wrong…

HTML:
Template7.registerHelper(‘renderFilters’, function(extendedData, entry) {
console.log(extendedData);
console.log(entry);
var mainHTML = ‘’;
if(extendedData.allowMultipleValueSelection == ‘true’) {
$.each(entry, function(index, value){
mainHTML += ’



  • <input type=“checkbox” name="’+extendedData.srchattridentifier+’" value="’+value.extendedData.uniqueId+’" @click=“filterList” />


    ‘+value.label+’



    • ‘;
    });
    } else {
    $.each(entry, function(index, value){
    mainHTML += ’


  • <input type=“radio” name="’+extendedData.srchattridentifier+’" value="’+value.extendedData.uniqueId+’" @click=“filterList” />


    ‘+value.label+’



    • ';
    });
    }
    return mainHTML;
    })

    Page Script:

    <script>
return {
 methods: {
 filterList: function() {
                console.log('value');
            }
}
}
</script>

    I don’t understand why this function is not being triggered.

    Hope to get a quick help, because I am stuck in my project at this point.

    2

    You simply insert the HTML code, JS / Vue does not see the events, need to manually set events

    $('[name="'+extendedData.srchattridentifier+'"]').on('change', function (e) {
console.log('changet!!!', e.target.checked);
 filterList();
});
    3

    Thank you for your response @Overman,

    But this is not helping me resolve my issue, I have to send few data to the function on value change, which I will be setting using data attribute, but I cannot set the on-chnage function as you have suggested.

    Do we have any other way to trigger that click as i have coded?

    Any code snippet will be helpful if possible.

    One more thing to add, I do not want to create any separate function like function abc() {} because I have to access few self elements from page while execution of filterList() function that’s why I want it on the same page.

    4

    Hi @Overman,

    I guess I was not able to understand your point clearly earlier but now I have figured out with your way. thanks a ton. :slight_smile:

    I used following way to get the click values:

    $$(document).on('change', 'input[type=checkbox]', function(e) {
    console.log($$(this).is(':checked'));
});
    1 Like