Question

I am trying to isolate my HTML from my js by replacing the following

<div id = "foo" onclick="bar(variable)"></div>

with

<div id = "foo"></div>
$(document).ready(function()    {
    $("#foo").click(function(event) {
        bar(???);
    });
});

Now, what would be a good way to transfer the parameter for bar().

Should I merge it with some element id? Or should I declare it as a JS variable using PHP when I load the page? Or is there a better way?

Answer 1

You can put an attribute on the item itself and retrieve that from the click handler.

<div id="foo" data-item="29"></div>

$(document).ready(function()    {
    $("#foo").click(function(event) {
        bar($(this).data("item"));
    });
});

Of course, if you only have one of these, you don’t need to abstract the data number, you can just do it like this:

$(document).ready(function()    { 
    $("#foo").click(function(event) { 
        bar(29); 
    }); 
}); 

But, I think we all assumed that you want the 29 to come from the markup so you can use a common click handler on many elements. If that’s the case, then the first method accomplishes that.