Question

我的代码只能使用一次。

这是我的HTML：

 <span id="0" class="add-title">add title</span>

我的JavaScript：

jQuery(document).ready(function($) {    

var iTitlesArray = [];  

$(document).on("click", ".add-title", function () { 

    alert(iTitlesArray);

    var thumbId = $(this).attr("id"), 
        thumbIdInt = parseInt(thumbId);             

    var lb_form = $('<div></div>').addClass('lb_form');
    var title_input = $('<input type="text">').addClass('txt-title');
    var btn = $('<div>Ok</div>').addClass('div-btn');   

    lb_form.append(title_input, btn);                   
    $('body').append(lb_form);

    $( ".div-btn" ).on( "click", function() {
            iTitlesArray[thumbIdInt] = $(".txt-title").val();
            $(".lb_form").fadeOut();                    
    });                                                     
  });
});

iTitlesArray的值仅在第一次更新。有谁知道为什么？

https://jsfiddle.net/fv3q5fng/1/

Answer 1

每次点击它时，请查看此Fiddle代码。

jQuery(document).ready(function($) {    

var iTitlesArray = [];  

$(document).on("click", ".add-title", function () { 

var thumbId = $(this).attr("id"), 
    thumbIdInt = parseInt(thumbId);             

var lb_form = $('<div></div>').addClass('lb_form');
var title_input = $('<input type="text">').addClass('txt-title');
var btn = $('<div>Ok</div>').addClass('div-btn');   

lb_form.append(title_input, btn);                   
$('body').append(lb_form);

$( ".div-btn" ).on( "click", function() {
        iTitlesArray[thumbIdInt] = $(".txt-title").val();
        $(".lb_form").fadeOut();                    
});                                                     
});
});

Answer 2

问题在于以下几行：

iTitlesArray[thumbIdInt] = $(".txt-title").val();

这将检索所有页面上的.txt-title元素，然后返回列表中 first 元素的值。

这是问题的原因是因为您正在调用fadeOut()而不是实际从DOM中删除以前的元素。如果你在褪色后删除它们不再是问题：

$(".lb_form").fadeOut(function() {
    $(this).remove();
});

请参阅更新的小提琴：https://jsfiddle.net/fv3q5fng/2/

我的代码只能运行一次

2 个答案: