1

I am adding html form with jquery function in wordpress using before function but in html code click event is not working

I am using on click function but may be not getting idea about delegate 

jQuery(document).ready(function( $ ){ 
  $("#slider-6-layer-11").before("<div class='search-container' id='search'><form action='#' class='form-horizontal' style='display: inline-flex;'><select style='width: 350px;font-size:30px;color: #888484;font-weight: 600;' class='form-control' name='type'><option class='form-control new' value='i am'> I am a</option><option id='container' class='form-control'  value='rentar'>Rentar</option><option class='form-control expand' value='buyer'>Buyer</option><option class='form-control expand' value='seller'>Seller</option></select><button id='mybutton' type='submit' style='display:inline-flex;height:50px;'><i class='fa fa-search'></i></button></form></div>");
 $('.new').on('click',function () {
    alert("Hello!");

  });
});

dont getting classname='new' don't know why

Alon Eitan
  • 11,997
  • 8
  • 49
  • 58
user3286812
  • 13
  • 3
  • `classname` is not a valid attribute for setting `class` - It comes from react which takes that prop and set the `class` attribute as that value – Mosh Feu Jul 14 '19 at 14:32
  • [Event handler not working on dynamic content [duplicate]](https://stackoverflow.com/questions/15090942/event-handler-not-working-on-dynamic-content) – Seyed Mosavi Jul 14 '19 at 14:50

1 Answers1

1

Use change event on <select> instead since events aren't supported on <option> cross browser

$('#search select').on('change',function () {
   if($(this).find(':selected').hasClass('new')){
      alert('Hello')
   }
});
charlietfl
  • 170,828
  • 13
  • 121
  • 150