CODEWITHSUNDEEP
javascriptjqueryhtml
Kiran Shahi
Kiran Shahi

Reputation: 7970

jQuery input event triggered after page reload only

Basically I have two divs,

<div id="firstPage"></div>

and 

<div id="details">
    <div id='searchBox' class='detail--searchBox'>
        <input id='txtSearchTerm' name='txtSearchTerm' type='text'>
    </div>
</div>

On page load the textbox with id searchBox is hidden and it is shown on click event of div with id firstPage. I have following function which must be triggered on textbox change. But this input event is triggered once page is reloaded. 

 onSearchBoxOnDetailsChange: function () {
     $("#searchBox").on("input", "#txtSearchTerm", function () {
         var val = $(this).val().trim();
         val = val.replace(/\s+/g, '');
         if (val.length > 1) {
             console.log(val);
         } else {

         }
     });
 },

Upvotes: 1

Views: 168

Answers (1)

Sumit Bhattarai
Sumit Bhattarai

Reputation: 308

Write your code like below:

onSearchBoxOnDetailsChange: function () {
  $(document).on("input", "#searchBox #txtSearchTerm", function () {
    var val = $(this).val().trim();
    val = val.replace(/\s+/g, '');
    if (val.length > 1) {
      console.log(val);
    } else {

    }
  });
},

Upvotes: 2

Related Questions