CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
user7742351
user7742351

Reputation: 13

jQuery not working in bootstrap modal

I am trying to highlight select elements in a bootstap modal layer using the following jQUery:

jQuery(window).load(function() {
    pqGlobal.selectInputStyle();
}


selectInputStyle: function () {
    jQuery( "select" ).on( "focus blur", function() {
          var elem = jQuery( this );
          elem.toggleClass( "focusBorder", elem.is( ":focus" ) );
        });
},

I understand that the modal layer is getting loaded after the window load event.

Is there a way around this problem?

Upvotes: 0

Views: 787

Answers (1)

joshweir
joshweir

Reputation: 5617

Instead of this: 

jQuery( "select" ).on( "focus blur", function() {
  var elem = jQuery( this );
  elem.toggleClass( "focusBorder", elem.is( ":focus" ) );
});

try this: 

jQuery( document ).on( "focus blur", "select", function() {
  var elem = jQuery( this );
  elem.toggleClass( "focusBorder", elem.is( ":focus" ) );
});

Which uses event delegation, allowing dynamic content to inherit jquery events.

Event delegation refers to the process of using event propagation (bubbling) to handle events at a higher level in the DOM than the element on which the event originated. It allows us to attach a single event listener for elements that exist now or in the future.

Upvotes: 1

Related Questions