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-label位于.databin-field内，它是.field-set-label和您想要更改的标签的父级。

修改优化代码使用.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();
});

Jquery .parents目标问题

2 个答案: