Annul event in another javascript document

Question

There are two documents in javascript I have an access to other non, i do not want the click event one.js in this work, only my two.js.

    one.js // I dont have acess

    $(document).ready(function(e){
       $('.contentsummary .actions a').click(function(e){
          $('.contentsummary .items').css('top','2000px');
       );
    });


   two.js // My File JS

  $(document).ready(function(e){
       $('.contentsummary .actions a').click(function(e){
          $('.contentsummary .items').css('top','0');
       );
   });

Why are you loading `one.js` then? – plalx Oct 06 '14 at 18:26 — plalx, Oct 06 '14 at 18:26

score 2 · Accepted Answer · answered Oct 06 '14 at 18:05

You just need to remove the event listener prior to adding yours:

   $(document).ready(function(e){
       $('.contentsummary .actions a').off('click');
       $('.contentsummary .actions a').on('click', function(e){
          $('.contentsummary .items').css('top','0');
       );
   });

T J · Answer 2 · 2014-10-06T18:21:44.387

From version 1.7 onwards the .click() method internally uses on() to bind the event handler

Hence you can use off() to remove the existing handler:

The .off() method removes event handlers that were attached with .on()

$(document).ready(function(e){
   $('.contentsummary .actions a').off('click').on('click', function(e){
      $('.contentsummary .items').css('top','0');
   );
});

Prior jQuery 1.7, Use unbind():

Event handlers attached with .bind() can be removed with .unbind().

$(document).ready(function(e){
   $('.contentsummary .actions a').unbind('click').bind('click', function(e){
      $('.contentsummary .items').css('top','0');
   );
});

Side note: Make sure your script runs after the other one.

score 0 · Answer 3 · edited May 23 '17 at 12:05

0

You need to unbind the click handler before adding another click handler:

$(document).ready(function(e){
   $('.contentsummary .actions a').off('click').on('click',function(e){
      $('.contentsummary .items').css('top','0');
   );
});

Example for the off and on methods: http://jsfiddle.net/8c6po6ft/
Related question: How to overwrite jquery event handlers

edited May 23 '17 at 12:05

Community

1
1

answered Oct 06 '14 at 18:07

orhanhenrik

1,397
7
11

score 0 · Answer 4 · answered Oct 06 '14 at 18:32

While others suggested how to fix the issues brought by a design issue, I suggest that you should rather fix your design issue.

If there's code that shouldn't run, why do you actually run that code? If in your new page you only need two.js and a subset of one.js excluding some pieces of it, well you should further segregated your code into more files.

subset-of-one.js
two.js

Having many files with $.ready is also another bad practice, but that's probably outside the scope of this question.

Annul event in another javascript document

4 Answers4