Click event is fired more than once in Internet explorer 9

Question

I have an hyperlink as:

<a href="#" class="search">Search</a>

On clicking the hyperlink I will get pop-up and I will perform advance search with Advance Search button in pop-up dialog with the jqgrid .

After clicking Advance Search button, It will call controller and returns grid.

My button's code is:

<a id="searchResults" class="btn btn-primary">Advance Search</a>

My jquery is:

 $('.search').on('click', function () {
      search();
  });


function search() {
    $('#searchResults').unbind('click').on('click', function () {
        searchClick();
     });
}

When I am using it in Google chrome , it works fine.

But, when I'm using it in Internet explorer(Version:9) , then $('.search').on('click',function(){..}); is called more than once and my controller throws " Session timed out " exception. Finally, I will get redirected to the login page .

Actually, it is fetching the grid results on clicking Advance Search on first click event. But, if it calls for second time, then the controller throws Exception.

But I don't know why it is calling the event $('.search').on('click',function(){..}); for the second,third,... times in Internet Explorer .

How to solve this problem?

Answer 1

请尝试

  e.preventDefault() 

Answer 2

Replace .unbind("click") with .off("click") or .one("click")

function search() {
    $('#searchResults').off('click').on('click', function () {
        searchClick();
     });
}

Answer 3

Instead of e.stopPropagation(), I used e.preventDefault() and works fine. Thanks @Kushal Vora

I got solution and code is:

 $('.search').on('click', function (e) {
     e.preventDefault();
     search();
 });