如果两个更改函数作用于同一个id，它将优先使用？

Question

I have a JavaScript working on some PHP code as follows:

$(function(){
    $("#hosted_prev_no").change(function(){ 
        $("#attend").show();
        $("#eligible").hide();
    });
    $("#hosted_prev_yes").change(function(){
        $("#attend").hide();
        $("#eligible").show();
    });
    $("#attend_prev_yes").change(function(){
        $("#eligible").show();
    });
    $("#attend_prev_yes").change(function(){
        $("#eligible").hide();    
    });

The php code is as follows:

  <div class="full row column">
    <label id="hosted_prev_label" for="hosted_prev" class="required">Have you hosted a Road Scholar program for Stetson University in the past?</label>
    <label id="hosted_prev_yes_label" for="hosted_prev_yes">Yes</label>
    <input id="hosted_prev_yes" name="hosted_prev" type="radio" value="Yes" />
    <label id="hosted_prev_no_label" for="hosted_prev_no">No</label>
    <input id="hosted_prev_no" name="hosted_prev" type="radio" value="No" /><br />
    <div id="attend" class="hidden">
      <label id="atend_prev_label" for="atend_prev" class="required">Have you attended at least one Stetson Road Scholar program in the past?</label>
      <label id="attend_prev_yes_label" for="attend_prev_yes">Yes</label>
      <input id="attend_prev_yes" name="attend_prev" type="radio" value="Yes" />
      <label id="attend_prev_no_label" for="hosted_prev_no">No</label>
      <input id="attend_prev_no" name="attend_prev" type="radio" value="No" /><br />
    </div>
    <div id="ineligible" class="hidden">
      <p>All hosts are required to attend at least one Stetson University Road Scholar program before they may host p program. You may apply again once you have attended a Stetson University Road Scholar program. Thank you for your interest.</p>
    </div>
  </div>
  <div id="eligible" class="full row column hidden">
    <h2>Cohost Information</h2>
    <label id="is_cohost_label" for="is_cohost" class="required">Will you be hosting with anyone?</label>
    <label id="is_cohost_yes_label" for="is_cohost_yes">Yes</label>
    <input id="is_cohost_yes" name="is_cohost" type="radio" value="Yes" />
    <label id="is_cohost_no_label" for="is_cohost_no">No</label>
    <input id="is_cohost_no" name="is_cohost" type="radio" value="No" /><br />
  </div>

The problem is that the second radios not displaying the "eligible" div. How do you know which change function has precedence here?

Answer 1

You are binding the same element twice:

$("#attend_prev_yes").change(function(){
    $("#eligible").show();
});
$("#attend_prev_yes").change(function(){
    $("#eligible").hide();    
});

I think what you need is:

$("#attend_prev_yes").change(function(){
    $("#eligible").show();
});
$("#attend_prev_no").change(function(){
    $("#eligible").hide();    
});