-1

I have an html page:-

<ul class="nav nav-tabs">
                       <li class="active"><a data-toggle="tab" href="#Info">Info</a></li>
                       <li><a data-toggle="tab" id="ViewTable" href="#view">View Details</a>
                    </ul>

My Jquery code is:- 

$("#ViewTable").on('click', function (e) {
                 $('.modal-footer .btn-danger').prop("disabled", true);
               });

My above code is not working can anybody tell me why?

sg055322
  • 161
  • 2
  • 15

1 Answers1

1

Try like this

  $(document).on('click', "#ViewTable", function (e) {
      $('.btn-danger').prop("disabled", true);
  });

Or else like

  $("#ViewTable").click(function (e) {
      $('.btn-danger').prop("disabled", true);
  });

For more on jQuery.on

Updated: We use document, a parent element which holds the entire DOM. We bind event to the parent element document and then select the proper #ViewTable element in the DOM tree we want. This approach is helpful for dynamically created DOM elements.

Jyothi Babu Araja
  • 10,076
  • 3
  • 31
  • 38
  • first one worked,but why you used 'document' selector, can u explain? – sg055322 Mar 22 '17 at 07:37
  • @shreyagupta Yes, updated it – Jyothi Babu Araja Mar 22 '17 at 10:48
  • ok, but here which elements are creating dynamically? The nav tabs or button etc. are present before the event triggers. Also I updated the question. Can u check that too. – sg055322 Mar 22 '17 at 10:51
  • 1
    Even your elements are static, I think Angular library reconstructs the `DOM` based on the `ng-` attributes. Since you have `ng-show` attribute which is a condition for angular whether to show or hide the underlying elements(`#ViewTable`). Then we can say that your elements are dynamic at `DOM` level. – Jyothi Babu Araja Mar 22 '17 at 15:31