jQuery element stored with `click` event not working as required

Question

One of my APP dev requires

I clone a link 3 times and stored in to an object. after i stored to object i have added some click event to stored object's link element.

I have a navigation link, when user click on the navi number, i am appending the stored element to container.

All it works. the issue is:

the click event of the link only works on page load. it's not working after shuffling the other stored object to container.

how to fix this. the event all are goes away. click event not working further.

here is my js:

var listLength = $('li').length;
var origional = $('.content');
var catcheEl = {};

    for(i=1;i<= listLength;i++){
        catcheEl['content'+i] = origional.clone();
        var link = $(catcheEl['content'+i]).find('a').addClass('link'+i);
        addEvent(link);
    }

function addEvent (link) {
    var x = 0;
    link.click(function(e){
        e.preventDefault();
        x++;
        console.log(x);
        $(this).addClass('p'+x); //only adds on page load.
    });
}

$('li').click(function(){
    var num = $(this).find('button').prop('class');
    $('#newContainer').html(catcheEl['content'+num]); //not working once other elements loaded.
});

$('.content').hide();

Live Demo

What i require is :

I should shuffle the link element clicking the navi button
the class name of element should continue
the added event should be continue.

Thanks in Advance.

that for loop which runs on listlength and call addevent is called on onload?? — Rishi Prakash
– Rishi Prakash, Commented Dec 28, 2014 at 15:36
I think you meant "cacheEl" when you wrote "catcheEl" above... I'd consider renaming it for clarity. — scunliffe
– scunliffe, Commented Dec 28, 2014 at 15:36
already there.. click on Live demo. or here jsfiddle.net/9zpktajf/1 — 3gwebtrain
– 3gwebtrain, Commented Dec 28, 2014 at 15:50

Razorphyn · Accepted Answer · 2014-12-28 16:59:42Z

1

EDIT NEW ANSWER
I don't like it so much since it relies on the class value(you should do some some security check, but...basically I have edited the way you define x, so I have retrieved all the classes of a, the splitted them, checked the lenght of the array.
Then if it is 1 (only link class) or 0 (don't know, just in case) or is not an array then set 0 otherwise retrieve the last array element and remove all the non numeric digit(hopefully, don't know about null byte or similar funny guys).

var listLength = $('li').length,
    origional = $('.content'),
    catcheEl = {};

function addEvent(link) {
    //Define the x variable
    var v=link.attr('class').split(/\s+/),
        l=v.length,
        x= (v.constructor === Array && (l==1 || l===0))? 0:parseInt(v[l-1].replace(/\D/g,''));

    link.click(function (e) {
        e.preventDefault();
        x++;
        $(this).addClass('p' + x);
    });
}

for (i = 1; i <= listLength; i++) {
    catcheEl['content' + i] = origional.clone();
    var link = $(catcheEl['content' + i]).find('a').addClass('link' + i);
    addEvent(link);
}

$('li').click(function () {
    var num = $(this).find('button').prop('class');
    $('#newContainer').html(catcheEl['content' + num]);
    addEvent($(catcheEl['content' + num]).find('a')); //Re-bind the event
});

$('.content').hide();

FIDDLE

edited Dec 28, 2014 at 16:59

answered Dec 28, 2014 at 16:10

Razorphyn

1,33215 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

3gwebtrain Over a year ago

Actually i tried this already. i am getting event triggered 2 tiems instead single.

Razorphyn Over a year ago

@3gwebtrain I'm ignorant, but if you remove an element from the document, does the binded function stay attached to it?

3gwebtrain Over a year ago

I am not sure. that's what i posted this question. i am trying to find a work-around too..

Collectives™ on Stack Overflow

jQuery element stored with `click` event not working as required

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related