Jquery onChange run a this function

I have created a function called billingOptions() it is associated with a dropdown (select) element. When a user selects an option in the dropdown the function is run.

The dropdown will dynamically be added through the page...each time adding the billingOptions() function onChange. I am trying to use Jquery to find the closest instance of the class=rate from the dropdown that was changed. Keep in mind that the dropdowns are added dynamically so there could possible be many instances of .rate...

I have tried using "this" and "closest" to find the nearest class (i'm not even sure you can use a class with the closest function). Here is some code:

***I was asked to provide the exact structure of the HTML (the rows of the table are dynamically generated. The table is static).

<table id="billTasks"> 
<tr> <input class="taskNameInput" type="text" size="52" placeholder="Task Name" name="task:1" disabled="disabled"> <select class="billOptions" onchange="billingOptions(this)">
<option class="fixedRate">Bill Fixed Rate</option>
<option class="hourly">Bill Hourly</option>
</select> 
<input type="text" name="fixedRate" placeholder="Rate" class="fiel开发者_StackOverflowdWidth100 rate"/> 
</tr> 
</table>

function billingOptions(){
 $(this).closest('.rate').hide();
}

***EDIT: this code does not work. The goal is to hide the input.rate element.

Edit: First off, you are half-right about your concern that this is not being passed to the function. It is being passed, but it is not being used. Give your function a named parameter, and reference that instead of this:

function billingOptions(el)
{
    $(el).something()...
}

Is .rate always the next element? If so:

$(el).next(".rate").hide();

Is .rate always a sibling? Will there only ever be one .rate sibling? If so:

$(el).siblings(".rate").hide();

Will .rate share a common parent with your select, and be the only instance of .rate in that common parent? If so:

$(el).closest(".commonParentClassName").find(".rate").hide();

If none of these works for you, please provide more detail on the structure of you HTML.

Edit: Thanks for posting the structure of your HTML. You are missing <td> in your HTML. Assuming your real code includes the <td>, and assuming there is only one .rate per row, try this:

function billingOptions(el)
{
    $(el).closest("tr").find(".rate").hide();
}

You haven't really asked a question, other than does closest work with a class, I set up this fiddle to show you that it does:

http://jsfiddle.net/JAjFF/

If you can tell us what is the question, have you tried the code above, does it work? What is the problem if not? Then I will amend my answer.

It's difficult to know exactly what your code is trying to do, but there are a couple of problems with it.

Firstly, you are passing a DOM element into your function, but your function has no parameters declared, and you're not accessing the argument you pass in. Also, this in this context refers to the Window object, not the element you want it to. Changing it to this (passing in a named argument and using that in place of this) would solve that:

function billingOptions(elem){
   $(elem).closest('.rate').hide();
}

You could alternatively use the arguments collection instead of using a named argument, but I would suggest the above method over that.

The next problem is that the closest method climbs the DOM tree until it finds the first element that matches the selector you pass it. In your case, as this refers to the Window object, closest isn't going to find an ancestor matching your selector.

It's also unlikely that the function shown above will solve that problem, as by the look of your code, .rate isn't an ancestor of the selected element. I would really need more information on how your HTML is structured to help you select the correct .rate element (e.g. is there always going to be a single .rate element, inside the same container as the select? If that is the case, here's a working example).

Does closest() work with a div? YES, but it's for ancestor elements

If your .rate element is on the same level as your SELECT element, you should use .siblings()

If your .rate element is inside your SELECT element, you should use .children()

If your .rate element is right outside of your SELECT element, you should use .parent()

If your .rate element is more then a few levels above your SELECT element, you should then use. closest() to find the closest one.

Also, your function is fine, you just need to update your selector.