Question

我有一个被定义为取消请求的对话框的DIV：

 <div id="first">
      //first content to load
 </div>
 <div id="second" style="display:none">
      // next content
 </div>
 <div id="CancelDialog" style="display:none">Are you sure?</div>
 <input type="button" value="Cancel" id="btnCancel" />
 <input type="button" value="Next" onclick="next();" />

并初始化：

 $(document).ready(function(){
    $("#CancelDialog").dialog({
         autoOpen: false,
         modal: true,
         buttons: {
                "Yes": function() {
                     $(this).dialog("close");
                     // calls a cancel function
                },
                "No" : function() {
                      $(this).dialog("close");
                 }
          }
      });

    <script type="text/javascript"
         function next() {
           $.ajax({
              type: 'POST',
              url: '@Url.Action("ShowNext"),
              success: function(data) {
                  $("#first").hide();
                  $("#second").html(data);
                  $("#second").show();
              }
           });
        }
  </script>

我的cshtml页面有三个其他DIV，这些DIV是从部分视图的ajax调用加载的。取消按钮在进行任何ajax调用之前第一次工作，但在隐藏第一个DIV并加载第二个DIV之后不再工作。在ajax调用之后没有任何事情发生。这是正常的吗？

如何让它在每个ajax调用以及后续显示和/或隐藏的DIV上工作？

Answer 1

由于您动态加载内容，因此您的网页上可能包含重复的ID（例如id="btnCancel"不止一次）。

jQuery和Javascript只能看到基于ID的搜索的第一个匹配。

您需要确保它们是唯一的（或者使用类）。

如果您显示完整页面，则有助于确定具体内容：）

jQuery Dialog在ajax调用后第二次没有打开

1 个答案: