Question

Here’s my HTML code:

<select class="grid_3 required jobData valid" id="clli" name="clli" style="font-size: 10px; border: none;">
<option value="0">Select One...</option>
    <option value="905"></option>
    <option value="931">0</option>
    <option value="1">ABRDMSES</option>
</select>
<img alt="This data has been changed!" title="This data has been changed!" src="images/caution.png">
<img alt="This data has been changed!" title="This data has been changed!" src="images/caution.png">
<img alt="This data has been changed!" title="This data has been changed!" src="images/caution.png">
<select class="grid_3 required jobData" id="job_status" name="job_status" style="font-size: 10px; border: none;">
<option value="0">Select One...</option>
</select>

When a $('.jobData').change(); occurs, I slap a caution image next to it to warn the user that there are changes to be saved. However, if they make more than one change to the same element, I first want to see if there is already a caution image there before sending a new one. Any theories/methods on how to just scope out the next (but not $.next()) element?

Answer 1

You can use $().one to trigger handler only once. This way you won’t need to check it.

$('select').one('change', function(e) {  });

If there is more than one selects in result set of selector, one would be applied to each of them , and as soon as you need to show image after each select, it will perfectly suit here.