Strange IE 11 + jQuery Behavior for "On" and "Click" Events

JavaScript
1

Problem 1: In IE 11, the on( “click”, “a.clickable_link”, function() {[…]}); executes properly but IE does not launch the clickable link (href) in a new tab. Why? There’s no event.preventDefault() happening or anything. In every other browser, the link launches successfully. How does IE 11 handle this event?

Problem 2: In IE 11, the $(‘#btn_refresh’).click() event straight up does not execute or register at all in IE 11. Any ideas?

Thanks in advanced.

UPDATE: Tested on IE 9 as well. Same behavior. It’s not specific to IE 11. Just IE in general.

HTML:


<div class="submenu">
	<b>Exchange Credits: <span id="xc"><?=number_format($this->exchange->credits)?></span> XC
	| Total Clicks: <span id="outbound_clicks"><?=number_format($this->exchange->total_outbound_clicks)?></span>
	| Total Clicks To You: <span id="inbound_clicks"><?=number_format($this->exchange->total_inbound_clicks)?></span></b><br>
	
	<a href="/exchange">Exchange Home</a> |
	<a href="/exchange/how_it_works">How It Works</a> |
	<a href="/exchange/your_creatures">Manage Your Creatures</a>
</div>

<h2>Links</h2>

<p>Click these links below to gain <b>Exchange Credits (XC)</b> so that your creatures continue to display here.</p>

<div align="center">
	<button id="btn_refresh" class="large orange button">Refresh Links</button>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<b>By Stats Preferred:</b>
	<select name="prefers" id="change_stats_preferred">
		<option value="0">All Stats</option>
		<option value="1">Clicks Only</option>
		<option value="2">Feeds Preferred</option>
	</select>
</div>

<div id="links">
<table cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td width="25%" height="140">
						<a href="/exchange/click/1161773/sncth7rUEzZ7XoQx3SeAlYg5d8g70kvO1At6oX8vd1U1DjhFjbvJm8NmAQKEGEEylYmpkIGuJMBNrlxzbzJiCB5D4IP2wAIiaYTO/4713" target="_blank" class="clickable_link"><img src="1161773.png" class="vam"></a>
						
						</td><td width="25%" height="140">
						<a href="/exchange/click/1315007/ffndSPXPqdCQHZ34R5t7HlBNmh4MDTrSi2ctr1mqcxD5ecxhfqxZRABoH5cK0zAiSlIhVVzkjmvxgXOU5PgH0NelgJpVp6Uj4EO3/2441" target="_blank" class="clickable_link"><img src="1315007.png" class="vam"></a>
						<br><br><b>Prefers</b> <img src="http://static.eggcave.com/icons/mouse.png" class="vam">
						</td><td width="25%" height="140">
						<a href="/exchange/click/1138573/Gns6V65DeRHHt7ADwcxsnDr7XVwLv6XuoRHK64IawvSU28ZCenzRlX6ySCzRixClB1F7QBWrpjOBq3Oxd3itHMQfue8m7X01TFnU/5046" target="_blank" class="clickable_link"><img src="1138573.png" class="vam"></a>
						
						</td><td width="25%" height="140">
						<a href="/exchange/click/1322329/lIfb8YQvUDgFRKV80t4CRD7l4MydQDUNjmvY1lFZmv5Z92uAKzv3cCZNjeWrHxQJATqNy8HPrQ5GNMzGMz3Kms4V3oAIYsaUpcqN/5035" target="_blank" class="clickable_link"><img src="1322329.png" class="vam"></a>
						
						</td></tr>
</tbody></table>
</div>

Javascript:

var fetching_xc = 0;
var sorting = 0;

// --------------------------------------
// Ready
// --------------------------------------

$(document).ready(function()
{
	// --------------------------------------
	// Fetch links ASAP
	// --------------------------------------
	
	fetch_links();
	
	// --------------------------------------
	// Clickable links change status
	// --------------------------------------
	
	$( document ).on( "click", "a.clickable_link", function()
	{
		$(this).parent().html('<img src="icons/tick.png" class="vam"> <font color="green"><b>Clicked!</b></font>').css('background', '#f2ffe7');
		
		// For snappiness but not necessarily accuracy
		var xc = $('#xc').html();
		xc.replace(',', '');
		
		var new_xc = (xc * 1) + 1;
		$('#xc').html(new_xc)
		
		// Begin fetching their XC
		if (fetching_xc == 0)
		{
			fetch_xc();
			fetching_xc = 1;
		}
	});
	
	// --------------------------------------
	// Bind the refresh button to this event
	// --------------------------------------
	
	$('#btn_refresh').click(function(e)
	{
		e.preventDefault();
		
		fetch_links();
	});
	
	// --------------------------------------
	// Handle sorting options
	// --------------------------------------
	
	$('#change_stats_preferred').change(function(e)
	{
		sorting = $(this).val();
		
		fetch_links();
	});
});

// --------------------------------------
// fetch_links() performs an AJAX request
// for this user's click exchange links
// --------------------------------------

function fetch_links()
{	
	// --------------------------------------
	// Change refresh btn status
	// --------------------------------------
	
	$('#btn_refresh').html('Loading...');
	$('#btn_refresh').attr('disabled', 'disabled');
		
	$.get('/exchange/get_links/'+sorting, function(data)
	{
		// --------------------------------------
		// Return the data
		// --------------------------------------
		
		$('#links').html(data);
		
		// --------------------------------------
		// Change refresh btn status
		// --------------------------------------
		
		$('#btn_refresh').html('Refresh Links');
		$('#btn_refresh').removeAttr('disabled');
	});
}

// --------------------------------------
// Quietly gets a user's XC
// --------------------------------------

function fetch_xc()
{
	$.get('/exchange/get_xc', function(data)
	{
		data = $.parseJSON(data);
		
		// --------------------------------------
		// Return the data
		// --------------------------------------
		
		$('#xc').html(data.xc);
		$('#outbound_clicks').html(data.outbound_clicks);
		$('#inbound_clicks').html(data.inbound_clicks);
		
		setTimeout('fetch_xc()', 6000);
	});
}

// --------------------------------------
// Tool function [add_commas]
// --------------------------------------

function add_commas(nStr)
{
	nStr += '';
	x = nStr.split('.');
	x1 = x[0];
	x2 = x.length > 1 ? '.' + x[1] : '';
	var rgx = /(\\d+)(\\d{3})/;
	while (rgx.test(x1)) {
		x1 = x1.replace(rgx, '$1' + ',' + '$2');
	}
	return x1 + x2;
}