jQuery - IE gives [object Object] error when displaying dialogs

Question

I'm making a page where a jQuery dialog comes up with some inputs and later javascript displays them. This works fine in:

• Chrome 31
• Opera 18
• Safari 5 (This is really old because I'm using safari for windows)

However, it does not work in Internet Explorer 7-11, or Firefox 26.

DEMO: http://bit.ly/1chhvBN

Error in IE 11:

Any Ideas? Thank you in advance.

Answer 1

Do not use href attributes to bind event handlers to elements. You have jQuery, use that to bind the events.

<div id="favorites">
    <a href="#" class="add">+</a>
</div>

Then, simply do:

$('#favorites a').click(function(e){
    e.preventDefault();
    $( '#dialog' ).dialog({width: 850, height: 300});
});

Do the same with the addToFavorites button.

<a href="#" class="addToFavorites button" style="width: 150px;">Add to My Favorites</a>

Then do:

$('.addToFavorites').click(function(e){
    e.preventDefault();
    addToFavorites();
});

Here's a demo: http://jsfiddle.net/aRpcL/3/

Answer 2

Use onclick instead of href for opening the dialog.

<a onclick="javascript:$( '#dialog' ).dialog({width: 850, height: 300});" class="add">+</a>

Note: Try to avoid inline scripting, move the JS code to some function and call it.