Question

我正在Django开展一个项目。我想将此对话框添加到我的页面JSFIDDLE。单击后，这是简单的对话框。

问题是它不起作用，但Chrome Inspect Console中没有显示错误。

你知道问题出在哪里吗？

我可以看到document ready功能的警报，但是我看不到点击文字后应该看到的警报。

这是base.html：

的标题

{% load static %}
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

<link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="{% static "css/jumbotron.css" %}" rel="stylesheet">
<link href="{% static "css/dropdown.css" %}" rel="stylesheet">

这是.js文件：

$('#open').click(function() {
    alert('alert');
    $('#dialog').dialog('open');

});

$(document).ready(function() {
    alert('onready');
    $("#dialog").dialog({
        autoOpen: false,
        modal: true,
        open: function(){
            $('.ui-widget-overlay').bind('click',function(){
                $('#dialog').dialog('close');
            })
        }
    });
});

这是我在html：

中的一个片段

<div id="dialog">Your non-modal dialog</div>
<a href="#" id="open">Open dialog</a>

如果有帮助，我附上html：

{% extends 'base.html' %}

{% load render_table from django_tables2 %}
{% load crispy_forms_tags %}
{% block head %}

    {% load static %}
    {% load staticfiles %}
    <link href="{% static "css/style.css" %}" rel="stylesheet">
{#    <script src="{% static "js/setMyOrdersTableRowColors.js"%}"></script>#}
    <script src="{% static "js/myOrdersCommunication.js"%}"></script>
    <link rel="stylesheet" href="{% static "django_tables2/themes/paleblue/css/screen.css" %}">
{% endblock %}
{% block content %}
    <div id="dialog">Your non-modal dialog</div>
<a href="#" id="open">Open dialog</a>
    {% if user.is_authenticated %}
        <p class="btn">My Orders</p>
        {% render_table table %}
    {% endif %}

{% endblock %}

Answer 1

您应该将点击事件移动到文档准备就绪：

$(document).ready(function() {
    $('#open').click(function() {
        alert('alert');
        $('#dialog').dialog('open');

    });

    alert('onready');
    $("#dialog").dialog({
        autoOpen: false,
        modal: true,
        open: function(){
            $('.ui-widget-overlay').bind('click',function(){
                $('#dialog').dialog('close');
            })
        }
    });
});

您的问题是您在该div存在之前在#id上注册了click事件。

JQuery对话框无法打开

1 个答案: