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 date-input在div内很好地加载，这是我的views.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>

这就是我如何在id为＃date-input的div内加载内容的方式现在，我想要的是根据我选择的日期获得更多的时间，但是脚本在此新加载的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。