javascript click not firing after partial view load

Question

I have a view with a javascript section. In this view I have javascript with an onclick event which fires on a tab click to load a partial view this all works perfectly.

Now I know javascript on a partial view wont work properly so in the main view I want to add a click event for when a print button gets clicked.

 <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>

so the tab click works perfectly but once my partial view is loaded then the print button debugger doesn't get hit. this is the button in my partial view.

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

I found that if I added the click event on the ajax success then it gets added and it fires. how can I tell the dom to be ready again after the partial load is complete? — JcMey3r
– JcMey3r, Commented Jul 5, 2016 at 17:59
does it work if you change it to .on? $('body').on('click', 'printBtn', function() { debugger; printElement(document.getElementById("modal-body")); window.print(); }); — Bryan Dellinger
– Bryan Dellinger, Commented Jul 5, 2016 at 18:00

faerin · Accepted Answer · 2016-07-05 18:01:17Z

6

Try changing your clickhandler to something like this:

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

answered Jul 5, 2016 at 18:01

faerin

1,92517 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SavindraSingh Over a year ago

Very neat solution. Worked perfectly.

Collectives™ on Stack Overflow

javascript click not firing after partial view load

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related