Create a jQuery function that can be called in multiple events

Question

I have a function which deletes row of a table.

Code goes like this:

jQuery(function() {
    initDeleteRow();
});

function initDeleteRow() {
    var containers = $('.management-section');
    $.each(containers, function() {
        if ( containers.length ) {
            var container = $(this);

            var deleteBtn = container.find('.activity-selected.delete');

            var individualDeleteBtn = container.find('.delete-row');

            deleteBtn.on('click', function(e) {

                var checkedBox = $(this).closest('.management-section').find('tbody .selection-check:checked');

                if ( checkedBox.length ) {
                    setTimeout(function() {
                        checkedBox.closest('tr').remove();
                        setTimeout(function() {
                            container.find('.activity-buttons').removeClass('selected-buttons').addClass('second-animation');

                            setTimeout(function() {
                                container.find('.activity-buttons').removeClass('second-animation');
                            }, 1040);

                        }, 100);

                    }, 1200);
                }

                    if($(this).closest('.management-section').find('tbody .selection-check:checked').length === $(this).closest('.management-section').find('tbody .selection-check').length) {

                            $(this).closest('.management-section').find('.check-all').prop("checked",false);

                    }
            });

        }
    });
}

However, I need to use some part of it in multiple occasions. For example,

deleteBtn.on('click', function(e) {
    // code inside this section needs to be used in another place
});

individualDeleteBtn.on('click', function(e) {
    // same code as above should run here with some small change such as it's not checkbox.
});

i tried putting everything inside a function like this:

deleteBtn.on('click', function(e) {
    deleteRowFunc();
});

function deleteRowFunc() {
    // all codes inside of deleteBtn.on('click', function(e) moved here
}

but it didn't work at all. not even any error in console. What am i missing here?

This is how the code looks after my change:

working Fiddle: https://jsfiddle.net/4rwvaey9/2/ not working Fiddle: https://jsfiddle.net/4rwvaey9/1/

Kinda meaningless without the HTML it could be badly designed layout or just very complex and intricate layout (I noticed nested setTimeout() so it's probably the former). If you are looking for an agnostic answer cut back on the code dumping. If you're looking to resolve the issue so it works, include the HTML but try to isolate to the most relevant code. Read this section on minimal reproducible example — zer00ne
– zer00ne, Commented Jul 26, 2019 at 0:47
@zer00ne try checking 1 checkbox and click on "Delete Selected" — Lucian
– Lucian, Commented Jul 26, 2019 at 1:48

John · Accepted Answer · 2019-07-26 19:49:12Z

1

this refers to the current object, when you wrap it in your own function, it is no longer a jquery object.

What you need to do is simply add a parameter to your function and bind that to the event.

function deleteRowFunc(e)

deleteBtn.on('click', deleteRowFunc);

https://jsfiddle.net/puxztfL5/2/

edited Jul 26, 2019 at 19:49

answered Jul 26, 2019 at 0:36

John

6,3274 gold badges48 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Lucian Over a year ago

this worked minor error in console. I have updated the question with working and not working fiddle if you'd see. try checking 1 checkbox and click on "Delete Selected"

John Over a year ago

@Lucian in your non working fiddle, you didn't do this change I specified.

Lucian Over a year ago

I did that on my local copy and there was an error container not defined. i kept this non working fiddle to have the general idea of what i tried and what i should be changing it into.

Lucian Over a year ago

cool, that helps. Thank you. could you edit your answer and add the link to fiddle there? i will and accept the answer.

CertainPerformance · Accepted Answer · 2019-07-26 00:36:57Z

0

You can combine the two jQuery objects with add, and then call .on on the combined collection:

const a = $('#a');
const b = $('#b');
a.add(b).on('click', () => {
  console.log('clicked');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="a">click a</div>
<div id="b">click b</div>

Or, for your code:

deleteBtn.add(individualDeleteBtn).on('click', function() {
  // ...
});

answered Jul 26, 2019 at 0:36

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Collectives™ on Stack Overflow

Create a jQuery function that can be called in multiple events

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related