使用ajax更新asp.net mvc核心的部分不會在部分HTML元素上運行javascript函數

Question

我有一個asp.net mvc core 2.2應用程序。 在頁面上，我正在加載部分內容：

<div class="col-md-9" id="content">
    @await Html.PartialAsync("_TrainingContent")
</div>

部分有一個模型，並使用video.js播放器加載視頻：

 @model Partner2Train.Models.ModuleViewModels.TrainingContentViewModel @if (Model != null) { <li>Do some training stuff for @Model.ModuleId</li> <div class="row"> <div id="instructions"> <video id="my_video" class="video-js vjs-default-skin" width="640" height="267" poster='' data-setup='{ "aspectRatio":"640:267", "playbackRates": [0.5, 1, 2], "controls":true, "preload":"auto", "autoplay":false, "inactivityTimeout":0 }'> <source src="~/video/sample_video.mp4" type="video/mp4" /> <source src="~/video/sample_video.webm" type="video/webm" /> <source src="~/video/sample_video.ogv" type="video/ogg" /> <p>Your browser does not support HTML5 video.</p> </video> </div> </div> <div class="row" style="margin-top:25px;"> <div id="db_data"> <label>Current video location: </label> <input type="text" id="watched_value" value="" disabled /><br /> <label>Total video duration: </label> <input type="text" id="total_duration" value="" disabled /> </div> </div> <br /><br /> } else { <text>Please select a module</text> } 

如果我具有修改div並加載視頻的javascript函數，則可以在文檔加載后運行視頻，然后就可以播放了。 但是，當我用ajax調用更新局部時：

 $("#tcontent").click(function () { $.ajax({ url: "Module/TrainingContent/?id=2", type: "get", //data: $("form").serialize(), //if you need to post Model data, use this success: function (result) { $("#content").html(result); } }); }) 

視頻不再加載。 ajax調用最終將返回更新的模型，以顯示在部分，不同的視頻，文本等中。我認為這不起作用，因為ajax不會觸發頁面加載，因此視頻javascript不會再次加載。 因此，我將視頻javascript移到了一個函數中，並在ajax調用成功時對其進行了調用：

 $("#tcontent").click(function () { $.ajax({ url: "Module/TrainingContent/?id=2", type: "get", //data: $("form").serialize(), //if you need to post Model data, use this success: function (result) { $("#content").html(result); vidprep(); vidbutton(); } }); }) 

但是，我得到的結果是相同的，因為它不會加載控件。 這些功能可以運行，就像我在控制台中看到的一些調試文本一樣，但不會添加視頻控件，而只是顯示帶有未格式化第一幀的框。

如果要使用ajax更新局部文件，如何使JavaScript能夠作用於局部文件中的元素？

任何幫助將不勝感激，因為我已經堅持了幾天。

Ajax調用后的元素

這是我執行的兩個JS函數，消息會打印到控制台：

 function vidprep() { console.log("In partial video function"); // Stop if HTML5 video isn't supported if (!document.createElement('video').canPlayType) { $("#video_controls").hide(); console.log("Can't Play Video"); return; } var video = document.getElementById("my_video"); // Play/Pause ============================// $("#play_button").bind("click", function () { video.play(); }); $("#pause_button").bind("click", function () { video.pause(); }); $("#play_toggle").bind("click", function () { if (video.paused) { video.play(); $(this).html("Pause"); } else { video.pause(); $(this).html("Play"); } }); // Play Progress ============================// $(video).bind("timeupdate", function () { var timePercent = (this.currentTime / this.duration) * 100; $("#play_progress").css({ width: timePercent + "%" }) }); // Load Progress ============================// $(video).bind("progress", function () { updateLoadProgress(); }); $(video).bind("loadeddata", function () { updateLoadProgress(); }); $(video).bind("canplaythrough", function () { updateLoadProgress(); }); $(video).bind("playing", function () { updateLoadProgress(); }); function updateLoadProgress() { if (video.buffered.length > 0) { var percent = (video.buffered.end(0) / video.duration) * 100; $("#load_progress").css({ width: percent + "%" }) } } // Time Display =============================// $(video).bind("timeupdate", function () { $("#current_time").html(formatTime(this.currentTime)); $("#watched_value").val(formatTime(this.currentTime)); }); $(video).bind("durationchange", function () { $("#duration").html(formatTime(this.duration)); $("#total_duration").val(formatTime(this.duration)); }); function formatTime(seconds) { var seconds = Math.round(seconds); var minutes = Math.floor(seconds / 60); // Remaining seconds seconds = Math.floor(seconds % 60); // Add leading Zeros minutes = (minutes >= 10) ? minutes : "0" + minutes; seconds = (seconds >= 10) ? seconds : "0" + seconds; return minutes + ":" + seconds; } } function vidbutton() { var $refreshButton = $('#refresh'); var $results = $('#css_result'); console.log("In video button"); function refresh() { var css = $('style.cp-pen-styles').text(); $results.html(css); } refresh(); $refreshButton.click(refresh); // Select all the contents when clicked $results.click(function () { $(this).select(); }); } 

Answer 1

您是否包含js文件並在瀏覽器中進行調試？