Make jQuery to discard an action for a particular div class

Question

I wrote a jQuery (function) to perform an action for certain div-class(A). When we click the hyperlinks within that div class, those links will be opened in another div-id(B). Here, my issues is : I want to disable the function for one link with in the first div class(A).

For example, if there are two hyperlinks in the div-class(A) (for suppose 1 and 2) when we click the link 1, it should execute the jQuery. When we click the link 2, the jquery should not be executed for that link. NOTE: the two links (link1 and link2 both are in the same div-class(A)).

my jQuery function goes as

$('.div-class(A) a').click(function(){
var url = $(this).attr('href');
var height = $('#div-id(B)').height();
var width = $('#div-id(B)').width();
$('#div-id(B)').replaceWith( "'<object data="+url+" width="+width+" height="+height+"/>'" );
return false;
});

How should I handle this issue. Do I need to add disable function?? Obviously, I shouldn't use .remove() -> as completely removes the link.

Any Suggestions???

Answer 1

if you use .on() to bind your event then you could unbind it with .off(), like so:

Updated to reflect OPs actual needs (I think)

$('.div-class(A) a').on('click', function(){
    var url = $(this).attr('href');
    var height = $('#div-id(B)').height();
    var width = $('#div-id(B)').width();

    $('#div-id(B)').replaceWith( "'<object data="+url+" width="+width+" height="+height+"/>'" );

    return false;
});

// This will unbind the click action for a tags inside a div with id #sub-b
$('#sub-b a').off('click');

One thing to note, if you use event delegation, then you can't use off on an inner div in this way.

working fiddle

see jQuery off documentation

Answer 2

Try

:not selector

$('.div-class(A) a:not(disabledLinkSelctor)').click(function(){
var url = $(this).attr('href');
var height = $('#div-id(B)').height();
var width = $('#div-id(B)').width();
$('#div-id(B)').replaceWith( "'<object data="+url+" width="+width+" height="+height+"/>'" );
return false;
});

Answer 3

If you want to remove the event once it has been clicked the first time then you can just unbind it:

$('.div-class(A) a').click(function(){
    var url = $(this).attr('href');
    var height = $('#div-id(B)').height();
    var width = $('#div-id(B)').width();
    $('#div-id(B)').replaceWith( "'<object data="+url+" width="+width+" height="+height+"/>'" );
    $(this).off("click");
    return false;
});

For more details on off: http://api.jquery.com/off/

If you just want certain links in your div to be clickable just add an appropriate class and filter by it:

$('.div-class(A) a.opensUpDivB').click(function(){
    var url = $(this).attr('href');
    var height = $('#div-id(B)').height();
    var width = $('#div-id(B)').width();
    $('#div-id(B)').replaceWith( "'<object data="+url+" width="+width+" height="+height+"/>'" );
    return false;
});