Unbind "click" for "onclick" attribute

Question

I have the following html element:

<span class="btn btn-mini btn-primary row-remove" onclick="someFunction(param1, param2)">
   <i>Remove</i>
</span>

When I do something else, I am disabling those buttons on the page:

$(".row-remove").attr("disabled", true);

The issue is, if you click the disabled button it still fires the "onclick", which is causing a big issue (there's a reason the buttons are disabled).

Is there any way to "disable" the onclick event as well? I've tried unbinding "click" but as excepted it didn't work (it's onclick, not bind()).

Thanks.

Best, Gary

PLease make sure about the element, is this a class ? If so you can Inspect your element and then click on remove button, you will see that the attribute disabled will appear into row-remove class element. You can try with $(".row-remove").attr("disabled", "disabled"); (I'm not sure both are work same for me). This is just a suggestion. — biswajitGhosh
– biswajitGhosh, Commented May 22, 2014 at 15:40

Rory McCrossan · Accepted Answer · 2014-05-22 15:37:36Z

1

Only form elements can have the disabled attribute. Toggling a click event on and off can get complicated. I would suggest that you add a data attribute to the element to show the elements' state. Something like this:

$('.row-remove').data('disabled', true);

function someFunction(param1, param2) {
    if (!$('.row-remove').data('disabled')) {
        // element is not disabled, continue on...
    }
}

I would also suggest attaching the click event using javascript to maintain a better separation of concerns:

<span class="btn btn-mini btn-primary row-remove" data-param1="param1" data-param2="param2">
   <i>Remove</i>
</span>

$('row-remove').click(function() {
    var $el = $(this);
    var param1 = $el.data('param1'); // = 'param1'
    var param2 = $el.data('param2'); // = 'param2'

    if (!$el.data('disabled')) {
        // element is not disabled, continue on...
    }
});

answered May 22, 2014 at 15:37

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gary Over a year ago

Thanks, worked great! Regarding your suggestion, I chose onclick because the backbone template I am using attaches this onclick event based on conditions and creates the param1 and param2 from the model. I wasn't actually aware of "data-param1=..", this is VERY useful, thank you. I will update my code with this now, it's much much cleaner =)

Collectives™ on Stack Overflow

Unbind "click" for "onclick" attribute

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related