4

I'm trying to cut down the repetitive code in JQUERY but can't figure out how to call my function from the "on-> click" function.

My function looks like this:

function myCheckAll(div, closer, finder){
    console.log(div+closer+finder);

      $(div).closest(closer).find(finder).prop('checked', this.checked); 
  }

And I'm trying to call it with something like this

  $("#check_all_0").on('click', myCheckAll("#check_all_0", "table", "input#val0"));

My problem is it doesn't work. What I don't understand is:

1) I'm defining the function outside of the document-ready brackets. Is this where I'm supposed to define it?

2) The console log is being called as soon as I load the page. Without clicking the target, and it doesn't call the function if I click the target.

I'm new to jquery and am probably doing something completely wrong, but would appreciate any help. Thanks.

Improve this question
4
  • "input#val0" don't do that. Change to "#val0" the other way is slower and redundant. Commented Aug 12, 2013 at 16:37
  • if finder is a DOM ID there is no need for all the other jQuery. Commented Aug 12, 2013 at 16:39
  • Finder in this case would be #val0 now, what jQuery could I cut? Commented Aug 12, 2013 at 16:44
  • $("#val0").prop('checked',this.checked); is all you need. Commented Aug 12, 2013 at 16:45

4 Answers 4

Reset to default
3

You may use a closure:

$("#check_all_0").on('click', function() {
    myCheckAll("#check_all_0", "table", "input#val0");
});
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2 
 $("#check_all_0").on('click', myCheckAll("#check_all_0", "table", "input#val0"));

That will result in getting myCheckAll first called, and the result passed as event handler to jQuery. You would have to wrap it with a function:

$("#check_all_0").on('click', function() {
    myCheckAll("#check_all_0", "table", "input#val0"));
})

Also see the documentation

Improve this answer

1 Comment

+1 for adding an explanation of the error and linking to a source.
0

Although other answers are working, I believe you are looking for something like this:

$("input").on('click', {name: 'me'}, func);

function func(event) {
    console.log(event.data.name);
}

Adapted to your code:

$("#check_all_0").on('click', {div: "#check_all_0", closer: "table", finder:  "input#val0"}, myCheckAll);

function myCheckAll(event){
    console.log(event.data.div);
    console.log(event.data.closer);
    console.log(event.data.finder);
    $(event.data.div).closest(event.data.closer).find(avent.data.finder).prop('checked', this.checked); 
}

Demo: http://jsfiddle.net/nabil_kadimi/sdMQ2/

Improve this answer

Comments

0

I'm not sure what you're trying to do, but it looks like a check all feature and while this isn't an answer to your question. It might help.

$('#check_all_0').on('click',function(e){
   $(this).closest('table').find(':checkbox').prop('checked',$(this).prop('checked'));
});

Without seeing the HTML it's not possible to know if that is correct, but you are using DOM IDs find things when maybe that's not the best way.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.