从局部视图更改元素时未击中JavaScript函数

Question

我从视图模型中获得以下下拉列表：

<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>

这是局部视图，在ajax调用时将其附加到div。

然后在主视图中，我有一个javascript：

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

剃刀视图的呈现的html如下：

<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>

但是，当我从下拉列表中选择一个值时，则未选中javascript。下拉菜单位于部分视图中，而javascript位于主视图中。 知道为什么不调用javascript函数吗？