javascript 不作用于通过 jquery ajax 加载的 HTML 内容

Question

我正在尝试创建一个充满 ajax 请求的表单，但我的 javascript 没有作用于我通过 ajax 调用加载到我的服务器的 HTML。

---template----
<form id="my_form" class="pure-form pure-form-stacked">
                                <fieldset>
                                <legend>Book Tickets</legend>
                        <div>
            <label for="state">Theatre:</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <select id="state" class="pure-input-1-2">
                {% for mul in film.multiplexes.all %}
                <option id="op{{ forloop.counter }}" title="{{ mul.name }}">{{ mul.name }}</option>
                {% endfor %}
            </select>
        </div>
        <br>

     <div id="date-input">
     </div>
    <br>
    <div>
         <input type="radio" name="time" value="morning" checked> 10:00 &nbsp;&nbsp;
         <input type="radio" name="time" value="evening"> 1:00 &nbsp;&nbsp;
         <input type="radio" name="time" value="night"> 6:00 
    </div>
    <br/>
    <input type="submit" class="button" value="Book Ticket">
</fieldset>

html 在 id 日期输入的 div 中加载得很好 这是我的意见。py

----views.py---
def bookdate(request):
if request.is_ajax():
    mov = request.POST.get('mov')
    multiplex = request.POST.get('multiplex')
    movie = Movies.objects.get(title = mov)
    for mult in movie.multiplexes.all():
        try:
            if mult.name == multiplex:
                date = mult.date.all()
                return render(request, 'jtc/bookdate.html', {'dates':date})
        except:
            pass
return render(request, 'jtc/bookdate.html',{})

这是我的脚本，它作用于我的当前页面以加载所选下拉列表的单选按钮

-------template-------
<script>
//for date
        $(document).ready(function(){
            $("#state").on('change', function(){
                console.log($(this).find("option:selected").prop("title"));
                $.ajaxSetup({cache:'true'});
                $.ajax({
                    url: "{% url 'bookdate' %}",
                    type: "post",
                    data: {
                            'multiplex' : $(this).find("option:selected").prop("title"),
                            'mov': $("#mymovie").text(),
                            'csrfmiddlewaretoken': getCookie('csrftoken')
                        },
                    success: function(data){
                        document.getElementById("date-input").innerHTML=data;
                    },
                    failure: function(){
                        alert("SERVER ERROR Conatct admin");
                    }
                    });
                });
            });
</script>

这就是我在 div 中加载内容的方式，ID 为 #date-input 现在我想要的是根据我选择的日期获得更多时间，但脚本不适用于这个新加载的 html 我对新加载的 html 的操作脚本

----template----
<script>
//for time
        $('#date-input').on('click', '#state', function(){
            $('#my_form input').on('change',function(){
                console.log($('input[name=date]:checked', '#form_date').val());
                $.ajax({
                    url: "{% url 'booktime' %}",
                    type: 'post',
                    data: {},
                    success: function(data){
                        alert(data);    
                    },
                    failure: function(){
                        alert("Contact admin server error");
                    }
                });
                });
            });
</script>

帮助？

Answer 1

我不懂 python，但是你需要在通过 AJAX 加载新的 HTML 节点后运行你的 JS。

只需在 AJAX 内容的末尾附加一个简单的 <script> 元素，以便它再次运行 javascript。