使用JQuery捕获Telerik MVC ComboBoxFor中的更改

时间:2011-03-17 11:33:31

标签: jquery combobox telerik-mvc

我使用以下代码捕获HTML输入中的更改文本:

$(document).ready(function() {
    $(':input', document.myForm).bind("change", function() { setConfirmUnload(true); }); 
});

这适用于普通文本框和复选框。

我正在使用Telerik的MVC ComboBoxFor呈现输入标签,但似乎没有触发上述JQuery。

如何抓住这个想法?

这就是HTML呈现的方式:

<div class="t-widget t-combobox t-header" id="InterviewRequired">
<div class="t-dropdown-wrap t-state-default">
    <input class="t-input" id="InterviewRequired-input" name="InterviewRequired-input" title="InterviewRequired" type="text" value="Select" />
    <span class="t-select t-header">
        <span class="t-icon t-arrow-down">select</span>
    </span>
</div>
<input id="InterviewRequired-value" name="InterviewRequired" style="display:none" type="text" value="0" />

我也在Telerik forums上问过这个问题,以防我在这里得不到答案。

2 个答案:

答案 0 :(得分:5)

下面是您可以附加到的事件列表: http://www.telerik.com/community/forums/aspnet-mvc/combobox/jquery-event-names.aspx

如果您想使用javascript以更动态的方式附加更改事件,您将附加到“valueChange”事件而不是“更改”:

$(document).ready(function() {
    $('#ComboBoxId').bind("valueChange", function() { setConfirmUnload(true); }); 
});

答案 1 :(得分:2)

观看演示here。 ComboBox呈现为<input/>和弹出<div/>

<div class="t-dropdown-wrap t-state-default">
  <input type="text" value="Chai" name="ComboBox-input" id="ComboBox-input" class="t-input" autocomplete="off">
  <span class="t-select t-header">
    <span class="t-icon t-arrow-down">select</span>
  </span>
</div>

查看客户端文档,您很可能需要注册位于here的客户端事件。

   <%= Html.Telerik().ComboBox()
            .Name("ComboBox")
            .ClientEvents(events => events
                .OnChange("onChange")
            )
    %>

    <script type="text/javascript">
        function onChange(e) {
           setConfirmUnload(true);
        }
    </script>

看起来你应该只能从这个例子中使用jQuery来实现它:

<%= Html.Telerik().ComboBox().Name("ComboBox") %>

<script type="text/javascript">
    $(document).ready(function() {
        $('#ComboBox').bind('change', function(e) { // your code });
    });
</script>

也许试试:

$(document).ready(function() {
    $('#myComboBox').bind("change", function() { setConfirmUnload(true); }); 
});