为什么更改jQuery UI Button的图标会破坏我在Internet Explorer中的链接？

Question

I am trying to change the icon of a button as soon as it was used. The code is pretty simple:

<a id='just-a-link' target="_blank" href="http://google.com">Google</a>

jQuery('#just-a-link').button().bind('click', function() {

    var icons = jQuery(this).button("option", "icons");
    icons.primary = 'ui-icon-plus';

    jQuery(this).button("option", "icons", icons);

});

However Internet Explorer the link does not get fired. So clicking on the link does change the icon but does not open the page .

What do you suggest to solve this?

http://jsfiddle.net/YnwnU/

In the fiddle you can see that jQuery(this).button("option", "icons", icons); causes the bug as the second button does open the link.

Answer 1

Alright well after looking at it some more, it looks like since you are calling .button() inside of an already established .button() call, it happens to be killing -href- or whatever eventHandlers were already set on it. (In this case opening a new window & link.

jQuery('#just-a-link').button().bind('click', function() {
    var icons = jQuery(this).button("option", "icons");
    icons.primary = 'ui-icon-plus';

    // Adding this makes it work in IE for at least the code you currently have
    window.open($(this).attr('href'));
});

It looks more to me like you are trying to simply add an icon to all external links, and open them in a new window. Why not just do this instead?

var icons = jQuery(this).button("option", "icons");
    icons.primary = 'ui-icon-plus';

jQuery('a[target="_blank"]').button().button("option", "icons", icons);

No need for binding a click... just setting all anchors with target="_blank" to button & giving them the Icon. This also makes it work automatically in IE and other browsers. Give it a go.

updated jsFiddle Demo