Returned html event calls

JavaScript
1

I am using the code below to display HTML from the click of a radio button. The displayed HTML uses additional jQuery event calls, but the event calls (keyup or click) in the generated HTML will not work.


	var ship_type = '';
	$('input[name^=pickup_delivery_]').click
	(
	function()
	{
		var i = this.name.substr(this.name.lastIndexOf('_') + 1);
		if ($(this + ':checked').val() == 0)
		{
			ship_type = '<input type="hidden" name="product_shipping_1" id="product_shipping_'+ i +'" value="fixed|0.00" />';
		}
		else
		{
			ship_type =
			'Postal code: <input type="text" name="postal_code_' + i + '" id="postal_code_' + i + '" size="7" value="" />' +
            '<p><input type="button" class="button1" name="calculate_shipping_' + i + '" id="calculate_shipping_' + i + '" value="Calculate Shipping" /></p>' +
            '<span id="product_shipping_' + i + '">' +
            '</span>';
		}
		$('#shipping_type_' + i).html(ship_type);
	});


	$('input[id^=postal_code_]').keyup
	(
	function()
	{
		var postal_code = $(this).val();
		var i = this.name.substr(this.name.lastIndexOf('_') + 1);
		postal_code = postal_code.replace(/\\s+/g, '');
		postal_code = postal_code.toUpperCase();
		$(this).val(postal_code);

	});



            <p> <strong>Shipping information:</strong><br />

			<input type="radio" name="pickup_delivery_1" value="0" /> Product Pickup
&nbsp;
			<input type="radio" name="pickup_delivery_1" value="1" /> Product Delivery
			</p>
			<p id="shipping_type_1">
			</p>
2

At what point are you executing your bind? if the document isn’t ready, the bind listener will not work…

3

Sorry. I do have the document ready. I forgot to include it. So…


$(document).ready
(
function()
{
// code from original post
});
4

Oh, (duh) I had a moment where I was not paying attention. The problem lies with a scoping issue in your generated code. As it is added to the page after the bind, your event listener will not recognize it. You have the option of doing 2 things:

  1. You the “live” method instead, that also detects any future instantiations on the page of the target element. $(elem).live(‘keyup click’, functio() {});
  2. place your second bind listener at the end of the function that gets executed, therefore after you have already inserted the new element

So you would end up with something that looks like this for example:
$(document).ready(function() {
var ship_type = ‘’;
$(‘input[name^=pickup_delivery_]’).click
(
function()
{
var i = this.name.substr(this.name.lastIndexOf(‘') + 1);
if ($(this + ‘:checked’).val() == 0)
{
ship_type = '<input type=“hidden” name=“product_shipping_1” id="product_shipping’+ i +‘" value=“fixed|0.00” />’;
}
else
{
ship_type =
‘Postal code: <input type=“text” name="postal_code_’ + i + ‘" id="postal_code_’ + i + ‘" size=“7” value=“” />’ +
‘<p><input type=“button” class=“button1” name="calculate_shipping_’ + i + ‘" id="calculate_shipping_’ + i + ‘" value=“Calculate Shipping” /></p>’ +
‘<span id="product_shipping_’ + i + ‘">’ +
‘</span>’;
}
$(‘#shipping_type_’ + i).html(ship_type);

    $('input[id^=postal_code_]').keyup
(
function()
{
    var postal_code = $(this).val();
    var i = this.name.substr(this.name.lastIndexOf('_') + 1);
    postal_code = postal_code.replace(/\\s+/g, '');
    postal_code = postal_code.toUpperCase();
    $(this).val(postal_code);

});

});

});

5

Thanks TommiChi for the help! Number 2 worked nicely.