0

I have the following dropdown from a view model:

<div class="mdl-selectfield mdl-js-selectfield mdl-selectfield--floating-label">
   @Html.DropDownListFor(model => model.QuoteModelSea.OriginAdd.Country, new SelectList(Model.QuoteModelSea.OriginAdd.CountryList, "Text", "Value"), "", htmlAttributes: new { @class = "mdl-selectfield__select" })
   @Html.LabelFor(model => model.QuoteModelSea.OriginAdd.Country, htmlAttributes: new { @class = "mdl-selectfield__label" })
</div>

This is in a partial view which is being attached to a div upon an ajax call.

Then in the main view I have a javascript:

$('#QuoteModelSea_OriginAdd_Country').change(function () {
        $('#searchTextField').val('');
       *actions*
});

The rendered html of the razor view is as follows:

<div class="mdl-selectfield mdl-js-selectfield mdl-selectfield--floating-label">
   <select id="QuoteModelSea_OriginAdd_Country" name="QuoteModelSea.OriginAdd.Country">
     <option value=""></option>
     <option value="1">abc</option>
     <option value="2">abc Islands</option>
     <option value="3">abc</option>
     <option value="4">abc</option>
   </select>
   <label class="mdl-selectfield__label" for="QuoteModelSea_OriginAdd_Country">Country</label>
</div>

However when I select a value from the dropdown, the javascript is not being hit. The dropdown is in a partial view and the javascript in the main view. Any idea why the javascript function is not being called?

refresh
  • 1,319
  • 2
  • 20
  • 71
  • At a guess, you're calling your javascript before [document ready](http://learn.jquery.com/using-jquery-core/document-ready/). – ProgrammingLlama Jul 05 '18 at 08:02
  • Check generated ` – Tetsuya Yamamoto Jul 05 '18 at 08:03
  • @TetsuyaYamamoto : I have checked it both are exactly the same – refresh Jul 05 '18 at 08:09

0 Answers0