javascript - 加载ajax模式时如何不重新加载

Question

当用户点击这样的下拉菜单选项时，我会在屏幕上显示模态警报:

$(document).ready(function(){

    $('#id_state').change(function(e){
        var selection = $("#id_state").val();
        if(selection == 1){
            event.preventDefault(); 
            var entryType = 'diabetes';
            var data = new Object();
            data.entryType = entryType;
            programAlertModal(programAlertModalCallback, data); 

            return false; 

        }
     });

     $('#id_state').trigger('change');
});

然后在此处调用程序警报模式:

programAlertModal:function(callback, data){
            var entryType = data.entryType;
            var url = '/shared/enrollment/'+entryType+'/';

            $.get(url, function(result) {  
                callback(result, entryType); 

                return false;
            });
        },

        programAlertModalCallback:function(result, entryType){  
            $( "body" ).append(result);

        },

结果是一些如下所示的 html:

<div class="takeover">
  <div class="takeover-bg"></div>
  <div class="takeover-body">
  {% if entry_type == 'diabetes' %}
    <h1>My awesome title</h1>

    <a href="">Dismiss</a>
  </div>
</div>

如何在不重新加载页面(并清除下拉选择)的情况下关闭已加载的内容？

Answer 1

在 Dismiss 链接中添加一个类，以便我们可以引用它:

<a href="#" class="dismiss">Dismiss</a>

然后在回调中绑定(bind)一个删除模态的处理程序:

programAlertModalCallback: function(result, entryType) {
  var $result = $(result).appendTo("body");
  $result.find("a.dismiss").on("click", function(e) {
    e.preventDefault();
    $result.remove();
  });
},