CODEWITHSUNDEEP
javascriptjquery
Jeff
Jeff

Reputation: 305

.append link will not fire onclick function

I've searched around I cannot find the answer to this. In my code, a link is created inside of a div and given an onclick value to pass an argument to a function. I cannot figure out why it will not fire.

var imgCount = 0;
var curImg;


function resetImg(target) {
alert(target);
}



$(".add").click(function () {
imgCount = imgCount + 1;
curImg = "theImg" + imgCount;


//Here we add the remove link
$('#links')
    .append('<a href="#" onclick="javascript:resetImg(\'' + curImg + '\');"  class="dynamic">Call Function</a>');
$('.dynamic').css('display', 'block');
});

Here's the fiddle: http://jsfiddle.net/stewarjs/4UV7A/

I've tried using .click() when creating the link, but the argument being passed needs to be unique to each link. I've tried grabbing $(this).attr("id") but the value comes back undefined.

Thanks for any and all help. Jeff

Upvotes: 1

Views: 651

Answers (3)

Blender
Blender

Reputation: 298106

There's always a way to get rid of onclick handlers. Here's how I'd do it:

var image_count = 0;

$('#links').on('click', '.dynamic', function(e) {
    e.preventDefault()

    alert($(this).data('image'));
});

$('.add').click(function () {
    $('<a />', {
        'href': '#',
        'data-image': 'theImg' + (++image_count),
        'class': 'dynamic',
        'text': 'Call function'
    }).appendTo('#links');
});

Demo: http://jsfiddle.net/4UV7A/4/

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191729

Rather than try to mangle HTML into JavaScript, I suggest you use the jQuery methods already available to you.

 $('#links')
    .append($("<a>").attr('href', '#').on('click', function () { resetImg(curImg);
 }).addClass('dynamic').text('Call Function'));

http://jsfiddle.net/ExplosionPIlls/4UV7A/1/

Upvotes: 4

pwolaq
pwolaq

Reputation: 6381

remove javascript: from onclick, it should like like this: onclick="resetImg(\'' + curImg + '\');"

Upvotes: 1

Related Questions