html - Jquery .removeattr() working issue when DOM is loaded with AJAX -

html - Jquery .removeattr() working issue when DOM is loaded with AJAX -

i have dom construction this:

<div id="main_common_listing_form"> <form id="frmlist" method='post'> .... <select id="refine_search"> <option value="novalueselected" selected="selected">please select search key</option> .... </select> .... </form> </div>

i replacing form element form element same construction through ajax. after replacement, trying remove selected attribute alternative element has selected attribute. javascript i've written is:

$("#main_common_listing_form").on("change", function(){ $(this).find("#refine_search option[selected='selected']").removeattr("selected"); })

this working fine before replacement of form element, not doing required, after form element replaced. can help me in resolving this? in advance.

try this

$(document).on("change","#main_common_listing_form", function(){ $(this).find("#refine_search option[selected='selected']").removeattr("selected"); })

reason : applied event on element replaced new one. new element doesn't have event attach it.

so utilize delegate attach event. newly created element have event attach it

jquery delegate description

attach handler 1 or more events elements match selector, or in future, based on specific set of root elements.

jquery html ajax