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。