javascript - DOM 更改后，单击时 jQuery 不起作用

Question

我在 razor 中设置了 HTML，如下所示:

  @if (ViewBag.Added != null)
                            {
                                if (ViewBag.Added == false)
                                {                        
                                    <div class="col-lg-2 col-md-3 col-sm-12 col-xs-12" id="wholeBtn">

                                     <a class="btn btn-app btnWatchList" style="min-width:100%;margin:0;height:67px">
                                    <i class="fa fa-save"></i> Add to Watchlist
                                  </a>
                                </div>
                                }
                                else if (ViewBag.Added)
                                {
                                    <div class="col-lg-2 col-md-3 col-sm-12 col-xs-12" id="addedToWatchList" style="padding:10px 0">
                                        <h4 style="text-align:center;margin-top:20px"><i class="fa fa-check" style="color:darkseagreen;font-size:25px"></i> Watching</h4>
                                    </div>
                                }
                            }
                            else
                            {
                                <div class="col-lg-2 col-md-3 col-sm-12 col-xs-12" id="wholeBtn">

                                    <a class="btn btn-app btnWatchList" style="min-width:175px;margin:0;height:67px">
                                        <i class="fa fa-save"></i> Add to Watchlist
                                    </a>
                                </div>
                            }

onclick 按钮如下所示:

$(".btnSaveWatchlist").on("click", function (event) {
       $.post("/User/SaveWatchList", { comment: $('#TextArea1').val(), rating: $('input[name=rating]:checked').val(), competitor: $('.txtSearch').val() }, $(this).prop('disabled', true))
                             .done(function (data) {
                                 if (data == "AllFieldsRequired") {
                                     ShowErrorMessage("All fields are required!");
                                     return;
                                 }
                                 else {
                                     $('.hideit').hide();
                                     $('.canvas').show();
                                     AnimateGreenCheck();
                                     setTimeout(function () {
                                         var result = $('<div />').append(data).find('#addedToWatchList').html();
                                         $('#wholeBtn').html(result);
                                         var l = document.getElementById('cancelButton');
                                         l.click();
                                     },
                                   3000);

                                     setTimeout(function () {
                                         ResetWatchListField();
                                     },
                                  4500);
                                 }
                             });
});

因此最初“添加到监视列表”按钮并不存在于 DOM 中。在网站上执行搜索后，它会加载到 DOM 中。

完成后，onclick 事件就可以正常工作了。发布完成后，我隐藏按钮并更新 DOM 以向用户显示他已将此用户添加到监视列表。

现在再次对未添加到监视列表的不同用户执行搜索，并且类“btnSaveWatchlist”的按钮“添加到监视列表”再次加载到 DOM 中。

但是这次它完全没有响应...我检查了 Controller 中的操作是否启动，它没有...按钮看起来像是“卡住”...

大家有什么想法吗？

附注所有这一切都是在不刷新页面的情况下完成的。我根本不想为最终用户刷新页面...

此处编辑的是带有类的 btnSaveWatchList 按钮:

  <button data-remodal-action="cancel" class="remodal-cancel" id="cancelButton">Cancel</button>
    <button class="remodal-confirm btnSaveWatchlist">Save</button>

Answer 1

Any ideas what could it be guys?

是的，标记(基本上是纯字符串)和文档对象模型之间的区别。您将事件监听器附加到特定的 DOM 节点，但在加载新标记时，该节点将被释放，并根据您提供的标记创建一个新节点。

事件监听器也随着旧节点一起消失了。

//listen for every 'click' event on an '.btnSaveWatchlist' that bubbles up to the `document.body`
$(document.body).on("click", ".btnSaveWatchlist", function (event) {
    //don't inline such stuff, it's completely unreadable
    var postData = { 
        comment: $('#TextArea1').val(), 
        rating: $('input[name=rating]:checked').val(), 
        competitor: $('.txtSearch').val() 
    };

    //don't know why you put this into the $.post() call.
    //this line returns $(this), but the arguments for $.post() 
    //are url, data, successHandler and dataType.
    //and $(this) is neither a successHandler, nor a dataType
    $(this).prop('disabled', true);

    $.post("/User/SaveWatchList", postData)
        .done(function (response) {
            if (response == "AllFieldsRequired") {
                ShowErrorMessage("All fields are required!");
                return;
            } else {
                $('.hideit').hide();
                $('.canvas').show();

                AnimateGreenCheck();

                setTimeout(function() {
                    //you don't need to manually parse the response
                    var result = $('#addedToWatchList', response)
                        .html();

                    $('#wholeBtn').html( result );

                    //don't try to fire a click-event by code. 
                    //Better call the function that gets executed if this event happened

                    //since chances are good, that you used jQuery to register this click-listener
                    //triggering the click-event will probably call it.
                    //this is more reliable than relying on the click-function of a dom-node.
                    $('#cancelButton').click();
                }, 3000);

                //a function that just forwards the call to another function is useless
                //just pass the function you want to call.
                setTimeout(ResetWatchListField, 4500);
             }
        });
});