为什么 Jquery 在 Ajax 更新后无法触发事件答案

【问题标题】：Why Jquery unable to fire events after Ajax update为什么 Jquery 在 Ajax 更新后无法触发事件
【发布时间】：2014-04-16 10:12:20
【问题描述】：

在我的 ASP.NET 项目中，我有一个分部类，其中有三个单选按钮。

我有以下详细信息的部分视图，

_PartialTEST.cshtml

@model FreeLance.Web.Models.PArtialTESTModel

@Html.RadioButtonFor(m => m.D1, "true", new { Name = "test1", @id = "g1", @checked = "true" }) @Html.LabelFor(m => m.MSGD1, @Model.V1)
@Html.RadioButtonFor(m => m.D2, "false", new { Name = "test1", @id = "g2" }) @Html.LabelFor(m => m.MSGD2, @Model.V1) 
@Html.RadioButtonFor(m => m.D3, "false", new { Name = "test1", @id = "g3" }) @Html.LabelFor(m => m.MSGD3, @Model.V1)

在另一个视图中使用，

MainTEST.cshtml

<div id="partialDIV">
       @{
           @Html.Partial("_PartialTEST", Model)
       }                           
</div>

我正在使用 AJAX 重新加载 div 的内容，以便使用新值更新单选按钮

$.ajax({
                type: "POST",
                url: href,               
                traditional: true,
                async: false,
                datatype: "html",
                cache: false,
                contentType: 'application/json',
                data: { DID: DID },
                success: function (data) {
                    $('#partialDIV').empty();
                    $('#partialDIV').html(data);
                },
                error: function (arg, data, value) {

                }
            });

它从后面的代码中调用以下代码。

[HttpPost]
        public ActionResult GETRADIOVALUES(string CID)
        {
            TESTModel NewModel = new TESTModel();
            ....
            return PartialView("_DurationDetails",NewModel);
        }

现在它使用新值正确加载单选按钮。

但真正的问题是调用任何 Jquery 事件。

例如

$('#g1').change(function() {
});

甚至，

$("input[name=test1]:radio").change(function () {

});

请帮助我为什么这些 Jquery 事件没有触发，尽管 ID 在 View Source 中也可用。

【问题讨论】：

你的ajax函数有一些不应该存在的东西，比如dataType:html然后contentType:"application/json"。
亲爱的 Jai，我不确定您是否对此投了反对票？请调查一下这个问题，显然我错过了数据类型Question
不，我没有否决这个问题。
没关系，我可以知道你为什么告诉这两个选项不是必需的。
我没有提到要删除它们，但你必须只携带所需的一个，所以在你的情况下你可以省略 contentType:json。

标签： javascript jquery ajax asp.net-mvc

【解决方案1】：

动态创建的元素需要event delegation。

 $(document).on('change',"input[name=test1]:radio",function () {
     //code here
 });

【讨论】：

亲爱的 Milind，如果我想检查这个条件怎么办，if($('#g1').is(':checked'))
您是否只希望它用于一个 ID 为 g1?? 的元素。如果是，那么只需将input[name=test1]:radio 更改为#g1
它会检查#g1 单选按钮是否被选中，还是会在选中和取消选中时触发？
在这两种情况下都会触发更改事件。如果您想在检查时执行某些操作，请使用条件 if($(this').is(':checked')) 或 if($('#g1').is(':checked'))
嗯，这个问题，在动态更新后它不会触发#g1 :(

【解决方案2】：

这样试试

$('#partialDIV').on('change', '#g1', function(){
 ....
});

也看看.on()

【讨论】：

感谢 Jogesh，但 Milind 只是快了几秒钟...感谢链接...