如何使用参数而不是在全局范围内将jQuery对象收集到.on事件中？

Question

That was a tricky question to phrase. I will elaborate.

I have an object which is a datatable in this case, but it could be any jQuery object.

I listen for my button click with an .ON click event and call a function called checkbox with a parameter of my object:

var temporaryFilesTable;

$(document).ready(function() 
{
    temporaryFilesTable = $("#temporaryFilesTable").dataTable();

    $("#checkboxButton").on('click', function()
    {
        checkbox(temporaryFilesTable); 
    });
});

This works fine and temporaryFilesTable passes as an object to the function checkbox.

The object "temporaryFilesTable" is the reference to the datatable - both are originally called within the document ready of an ajax triggered php / js file.

In another .js file where I store most of my reusable functions I have the function checkbox(checkboxTable).

This function creates a modal that has several buttons on. I want to use these buttons to call functions such as selectFiltered(checkboxTable).

Because the function checkbox(temporaryFilesTable) brings in the table object I need to reuse the object to trigger the next function. I am used to passing variables as parameters into functions using onclick="function(parameter)", or in this case with the modal I would have to use:

function checkbox(checkboxTable)
{
...
    var content = '<a href="#" onclick="selectFiltered('+checkboxTable+') class="button>'
...
<!-- Trigger modal -->
}

This actually doesn't seem to work anyway so my syntax is probably wrong but that is not really the point. I am reluctant to use onclick as I am currently correcting my code to use jQuery .ON click instead.

Without declaring temporaryFilesTable as a global object can I somehow get this jQuery object into an .ON click listener?

If not, I suppose I could consider declaring the datatable object as a global that can be accessed across multiple .js files, rather than passing it around functions so much? The problem is this means I would have write my functions to trigger jQuery on each datatable object, even those that might not be in the DOM at the time. I guess that's not ideal.

** Additional info ** The code to check the checkboxes in the way I wanted worked fine before I started passing the table as a parameter. I wanted to do this because I have multiple pages, with different tables, where I would like to use the same checkbox ticking modal and functions. I can post the original code if it helps but I didn't want to confuse the question.

To clarify I realise I do declare my temporaryFilesTable putting it into global scope in my first section of code but I don't think this passes between the .js files. This is just to allow me to use it outside of document ready.

Thanks for reading.

Answer 1

I would suggest trying to attach the on click event after the html is append to the dom. The object doesn't play nice when passed into a string through a function. So I would try something like this:

$("#appedTo").append(content);
//Then select the a, and attach the on click event
$([selector to get the link]).on("click", function(){
    selectFiltered(checkboxTable);
});