Jquery .parents目标问题

Question

因此，我有这个脚本，这是工作在所有方面的文件，除了目标，当我需要改变标签。您可以添加一个html标记元素，然后编辑它的设置。console.log正在返回标签值，但是它的目标不改变标签的HTML有一个问题。有什么想法吗？

var tCheckbox = "<?php echo $tCheckbox ?>";
var tText = "<?php echo $tText ?>";
var tNumber = "<?php echo $tNumber ?>";
count = 0;

function addField(template) {
    count++;
    currentTemplate = "";
    currentTemplate = template;

    // ADD Databin Field -------------------------------------------
    // replace all & with the designated count no
    currentTemplate = currentTemplate.replace(/\&/g, count);    

    // add template to fieldrange
    $(".field-range").append(currentTemplate);              

    // BIND Databin HTML Settings ----------------------------------                
    $(".field-set-label"+count).change(function(){  
        console.log("changed label")                    
        $(this).parents(".databin-field .field-label").html($(this).val()); 
    });     

    $(".delete-field" + count).click(function(){                                    
        $(this).parents(".databin-field").remove();             
    }); 
};

$("#addCheckbox").click(function(){
    addField(tCheckbox);
}); 
$("#addText").click(function(){
    addField(tText);
});
$("#addNumber").click(function(){
    addField(tNumber);
});     

Answer 1

变化

$(this).parents(".databin-field .field-label").html($(this).val()); 

至

$(this).closest(".databin-field").find(".field-label").html($(this).val()); 

您没有显示HTML，但我假设.field-标签位于..databin字段中，它是.field-set标签和您想要更改的标签的父级。

编辑优化代码以使用.closest而不是.parents().first()。由于下面的答案，我注意到.closest提供了优越的性能，因为它一旦找到第一个元素就停止了

Answer 2

如果count只用于我们在问题中看到的元素标识，那么count就没有必要了。事件处理可以委托给静态容器元素，从而避免重新发现新追加的元素。

使用委托的事件，addField()将简化到可以省去的程度。

var tCheckbox = "<?php echo $tCheckbox ?>";
var tText = "<?php echo $tText ?>";
var tNumber = "<?php echo $tNumber ?>";

$("#addCheckbox").click(function(){
    $(".field-range").append(tCheckbox);
}); 
$("#addText").click(function(){
    $(".field-range").append(tText);
});
$("#addNumber").click(function(){
    $(".field-range").append(tNumber);
});

// Delegate Databin event handling to container element -----
$(".field-range").on('change', ".field-set-label", function() {// <<<< delegate to static element(s)
    $(this).closest(".databin-field").find(".field-label").html($(this).val());//same assumption here as Zoran P's
}).on('click', ".delete-field", function() {// <<<< delegate to static element(s)
    $(this).closest(".databin-field").remove();
});