与“click”事件一起存储的jQuery元素未按要求工作

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

本文关键字：元素 工作 jQuery click 事件 存储 一起      更新时间：2023-09-26

我的一个应用程序开发需要

我克隆了 3 次link并存储在一个对象中。 存储到对象后，我向存储对象的link元素添加了一些单击事件。

我有一个导航链接，当用户单击导航编号时，我将存储的元素附加到容器中。

一切都有效。问题是：

link的click事件仅适用于页面加载。 将另一个存储的对象改组到容器后，它不起作用。

如何解决这个问题。事件都消失了。 click事件无法进一步工作。

这是我的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();

现场演示

我需要的是：

  1. 我应该打乱 link 元素单击导航按钮

  2. element的类名应继续

  3. 添加的事件应继续。

提前谢谢。

编辑新答案
我不太喜欢它，因为它依赖于类值（您应该做一些安全检查，但是......基本上我已经编辑了你定义x的方式，所以我检索了 a 的所有类，拆分了它们，检查了数组的长度。
然后，如果它是1（仅link类）或0（不知道，以防万一）或不是数组，则设置0否则检索最后一个数组元素并删除所有非数字（希望不知道空字节或类似的有趣家伙）。

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();

小提琴

相关文章：