部分视图加载后javascript单击未触发

Question

我有一个带有 javascript 部分的视图。在这个视图中，我有一个带有 onclick 事件的 javascript，该事件在选项卡单击时触发以加载部分视图，这一切都很好。

现在我知道局部视图上的 javascript 无法正常工作，因此我想在主视图中添加一个单击事件，用于单击打印按钮时。

 <script type="text/javascript">
    $(function () {

        $('#printBtn').click(function () {
            debugger;
            printElement(document.getElementById("modal-body"));
            window.print();
        });

        $('#tabStrip a').click(function (e) {
            e.preventDefault()
            var tabID = $(this).attr("href").substr(1);

            $(".tab-pane").each(function () {
                $(this).empty();
            });

            $("#" + tabID).empty().append("<div class='loader'><img src='/Content/img/Loader/ajax-loader.gif' alt='Loading' /></div>");

            $.ajax({
                url: "/Account/CustomerTab",
                data: { Id: tabID },
                cache: false,
                type: "get",
                dataType: "html",
                success: function (result) {
                    $("#" + tabID).empty().append("<div id='replaceDiv'>" + result + "</div>");
                    $(document).trigger('ready');
                    debugger;
                }
            });
            $(this).tab('show')
        });
    });
</script>

所以选项卡单击可以完美运行，但是一旦加载了我的部分视图，打印按钮调试器就不会被击中。这是我局部视图中的按钮。

<button id="printBtn" type="button" class="btn btn-default">Print</button>

Answer 1

尝试将您的点击处理程序更改为如下内容：

$(document).on('click','#printBtn', function() {
  //your code here
  }