All, I have a visualforce SPA that loads a promotional code using a soql query. When I don't rerender the picklist, jquery can easily find the selectList id and its value, and it works great. However, jquery stops working on this picklist after I rerender it, which is a requirement. The rerender is causing the issue but I cannot figure it out why. I even tried to write to the console with no luck, nothing gets written. I tried multiple things from actionsupport to using outputpannel and the like with no improvement. Thoughts?
<div class="col-sm-4">
<div class="form-group">
<label for="promo">
<span class="star">*</span>Did you receive a promotion code?</label>
<apex:selectList id="promo" size="1" value="{!selectedPromo}" styleClass="form-control">
<apex:selectOptions value="{!Promo}" />
</apex:selectList>
<p id="msg_promo" />
</div>
</div>
.........
j$(function () {
j$('[id$="promo"]').change(function () {
var lstselection = j$('[id$="promo"]').val();
console.log('promo: ' + lstselection);
if (lstselection == 'Other') {
j$("#section_promo_other").show();
} else {
j$("#section_promo_other").hide();
}
});
});