Question

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

这是我的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')更改为靠近下拉列表的某个容器。

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

即使删除了元素，使用.on()函数附加的处理程序仍然存在。 Read more here.

Answer 2

使用 jquery 3.6 的更现代的答案

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

jQuery .change（）只触发一次

2 个答案: