jQuery .change() 只触发一次

Question

我有一个名为“ddlCaseFiles”的 DropDownList。 然后我有一个我导入的脚本，其中包含用于捕获事件的 jQuery .change() 函数。 然后我有 3 个单选按钮来对 dropDownList 进行排序。 加载默认单选按钮后，将触发该事件。 但是一旦我选择了另一个单选按钮，该事件就不再触发。

这是我的下拉列表：

<asp:DropDownList runat="server" ID="ddlCaseFiles" DataSourceID="dsMyCaseFiles" 
DataTextField="Display" DataValueField="FileID" OnPreRender="ddl_PreRender" />

这是我的 jQuery .change()：

 $('#ddlCaseFiles').change(function () {
    debugger;
    $('#lblNextExhibitNumber').text('');
    var temp = $(this).val();
});

这是单选按钮功能的截图：

    protected void rbByFileName_CheckedChanged(object sender, EventArgs e)
{
    ddlCaseFiles.DataSourceID = "dsCaseFilesReverse";
    ddlCaseFiles.DataTextField = "Display";
    ddlCaseFiles.DataValueField = "FileID";
}

protected void rbByFileID_CheckedChanged(object sender, EventArgs e)
{
    ddlCaseFiles.DataSourceID = "dsCaseFiles";
    ddlCaseFiles.DataTextField = "Display";
    ddlCaseFiles.DataValueField = "FileID";
}

我以前从未使用过 .change() 。 所以也许我错过了一些东西

Answer 1

看起来单选按钮的 CheckedChanged 事件不会触发下拉更改事件。 当下拉列表的选定值更改时，将触发 JS 更改事件。 当您更改DataSourceID ，这不一定会发生，是吗？

我不确定如何在 ASP 中触发它。 也许ddlCaseFiles.SelectedIndexChanged() ？

否则，您可以向收音机添加点击事件处理程序：

$('input[type="radio"].someCssClass').click(function(){
   $('#ddlCaseFiles').trigger('change');
});

编辑：

这只是一个猜测，但看起来CheckedChanged可能正在修改页面上的<select>元素。 比如是不是每次DataSourceID变化都重新插入？

尝试使用.on()函数像这样更改下拉更改事件处理程序：

$('body').on('change', '#ddlCaseFiles', function () {
    debugger;
    $('#lblNextExhibitNumber').text('');
    var temp = $(this).val();
});

注意：为了获得更好的性能，将$('body')更改$('body')靠近下拉列表的某个容器。

.change()函数将change处理程序附加到页面上的元素。 如果 ASP 删除一个元素并稍后重新添加它，那么处理程序就消失了。

即使删除了元素，使用.on()函数附加的处理程序仍然存在。 在这里阅读更多。

Answer 2

使用 jquery 3.6 的更现代的答案

    $(document).on('change', "#ddlCaseFiles", function (e) {
      debugger;
      $('#lblNextExhibitNumber').text('');
      var temp = $(this).val();
    });