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>

然后绑定一个删除回调模式的处理程序：

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

Answer 2

将e参数传递给您的函数并添加e.preventDefault();以防止重新加载页面的a标记的默认行为。您还应该在href="#"中添加a，因为在某些情况下将其留空会导致一些问题。

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

2 个答案: