jQuery重复只能在一次点击时使用

时间:2014-02-07 18:46:04

标签: javascript jquery regex

我在网上找到了这个代码,并希望根据我的需要对其进行改造。在最初的小提琴中,它使用了jQuery 1.7,但我使用的是1.10,他们弃用live()功能我将值切换为on()但现在它只能工作一次(我可以复制很多但我可以之后不删除或复制)我包含了fiddle。我尝试使用旧代码但无法使其工作的另一件事是删除了单击重复按钮的需要,而是将其放在for循环中,从变量中获取重复值。我没有得到错误,这使得很难排除故障。

var regex = /^(.*)(\d)+$/i;
var cloneIndex = $(".clonedInput").length;
var locations = 3;
    for(var i = 0; i < locations; i++){
        $(this).parents(".clonedInput").clone()
            .appendTo("body")
            .attr("id", "clonedInput" +  cloneIndex)
            .find("*").each(function() {
                var id = this.id || "";
                var match = id.match(regex) || [];
                if (match.length == 3) {
                    this.id = match[1] + (cloneIndex);
                }
        });
        cloneIndex++;
    };

1 个答案:

答案 0 :(得分:2)

创建克隆元素后,您已在文档中引入了 new DOM元素,因此您必须让.click()处理者聆听$(document })或$('body')委派它。因此,如果您重写了以下.click()处理程序:

$("button.clone").on("click", function(){
    //.clone() etc
});

为:

$(document).on("click", "button.clone", function(){
    //.clone() etc
});

演示小提琴http://jsfiddle.net/XcbsP/

在第二个例子中,我交换了HTML ID,转而使用编号的索引jQuery的.attr() / .data()来帮助跟踪索引。所以将来如果你需要重新选择一个元素,你可以:

   $(".clonedInput[data-index='2']");

同样,在创建许多新克隆时,单击对象,在创建计数器时预先增加计数器:

/**
 *  Where $(this).val() is the <option value="2">
**/
for( var x = 0; x < $(this).val(); x++ )
    $('body').append( $(this).parents('.clonedInput')
                             .clone( true )
                             .attr('data-index', ++cloneIndex ));

这使得HTML更加清晰,对id=""的依赖性降低,特别是当您使用.classes时所用的许多内容时。

演示小提琴http://jsfiddle.net/n6a7e/